@php
    $selectedEmail = $get('email');
    $pin = (string) ($get('pin') ?? '');
    $pinLength = strlen($pin);
@endphp

<div class="fi-grid" style="--cols-default: 1; gap: 1.5rem;">
    @if (! $hasPinUsers)
        <x-filament::empty-state
            heading="No admin PINs yet"
            description="Use the password login fields below to sign in, then set an Admin PIN in Users."
            icon="heroicon-o-lock-closed"
            icon-color="gray"
        >
            <x-slot:footer>
                <x-filament::badge color="gray" size="lg">
                    Password login enabled
                </x-filament::badge>
            </x-slot:footer>
        </x-filament::empty-state>
    @else
        <x-filament::section
            heading="Admin selection"
            description="Tap your name to select an account."
        >
            <div class="fi-grid fi-grid-ctn sm:fi-grid-cols lg:fi-grid-cols" style="--cols-default: 1; --cols-sm: 2; --cols-lg: 3; gap: 1rem;">
                @foreach ($users as $user)
                    <div class="fi-grid-col">
                        <x-filament::button
                            type="button"
                            wire:click="selectUser({{ $user->id }})"
                            :color="$selectedEmail === $user->email ? 'primary' : 'gray'"
                            :outlined="$selectedEmail !== $user->email"
                            size="lg"
                            style="width: 100%; text-align: left;"
                        >
                            <div>
                                <div>{{ $user->name }}</div>
                                <div>{{ $user->email }}</div>
                            </div>
                        </x-filament::button>
                    </div>
                @endforeach
            </div>
        </x-filament::section>

        <x-filament::section
            heading="PIN"
            description="Enter the selected admin PIN to continue."
        >
            <x-slot:afterHeader>
                <x-filament::button
                    type="button"
                    color="gray"
                    outlined
                    size="sm"
                    wire:click="clearPin"
                >
                    Clear
                </x-filament::button>
            </x-slot:afterHeader>

            <x-filament::badge
                color="gray"
                size="lg"
                style="font-size: 2.25rem; padding: 1.25rem 2rem; letter-spacing: 0.6rem;"
            >
                {{ $pinLength ? str_repeat('*', $pinLength) : '----' }}
            </x-filament::badge>

            <table class="fi-ta-table" style="margin-top: 1rem;">
                <tbody>
                    @foreach ([[1, 2, 3], [4, 5, 6], [7, 8, 9]] as $row)
                        <tr>
                            @foreach ($row as $digit)
                                <td class="fi-ta-cell fi-align-center" style="width: 33%;">
                                    <x-filament::button
                                        type="button"
                                        wire:click="appendPinDigit({{ $digit }})"
                                        size="xl"
                                        color="gray"
                                        style="width: 100%;"
                                    >
                                        {{ $digit }}
                                    </x-filament::button>
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                    <tr>
                        <td class="fi-ta-cell fi-align-center" style="width: 33%;">
                            <x-filament::button
                                type="button"
                                wire:click="clearPin"
                                size="xl"
                                color="gray"
                                outlined
                                style="width: 100%;"
                            >
                                Clear
                            </x-filament::button>
                        </td>
                        <td class="fi-ta-cell fi-align-center" style="width: 33%;">
                            <x-filament::button
                                type="button"
                                wire:click="appendPinDigit(0)"
                                size="xl"
                                color="gray"
                                style="width: 100%;"
                            >
                                0
                            </x-filament::button>
                        </td>
                        <td class="fi-ta-cell fi-align-center" style="width: 33%;">
                            <x-filament::button
                                type="button"
                                wire:click="deletePinDigit"
                                size="xl"
                                color="gray"
                                outlined
                                style="width: 100%;"
                            >
                                Del
                            </x-filament::button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </x-filament::section>

        @error('data.email')
            <x-filament::badge color="danger" size="lg">
                {{ $message }}
            </x-filament::badge>
        @enderror
    @endif
</div>