{{--
    Quick PIN unlock for a browser already bound via device-token-script.
    Plain fetch() to the existing /pin-login endpoint (outside Livewire —
    PinLoginController deliberately sits outside the auth/guest middleware
    groups), mirroring leolanka-inertia's PinPad component: wrong PIN and an
    untrusted/expired device return the identical error, both fall back to
    the password form.
--}}
<div x-show="pinPad" x-cloak class="space-y-5">
    <div class="text-center">
        <p class="text-sm font-medium text-gray-950 dark:text-white" x-text="device ? ('Welcome back, ' + device.user.name) : ''"></p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Enter your PIN to continue.</p>
    </div>

    <div class="space-y-1.5">
        <input
            type="text"
            inputmode="numeric"
            autocomplete="one-time-code"
            maxlength="6"
            x-model="pin"
            x-on:input="pin = pin.replace(/\D/g, '')"
            placeholder="••••"
            class="fi-input block w-full rounded-lg border-none text-center font-mono text-lg tracking-[0.5em] shadow-sm ring-1 ring-gray-950/10 dark:bg-white/5 dark:ring-white/20"
        />
        <p x-show="error" x-text="error" x-cloak class="text-sm text-danger-600 dark:text-danger-400"></p>
    </div>

    <button
        type="button"
        x-on:click="submitPin()"
        x-bind:disabled="submitting || pin.length < 4"
        class="fi-btn fi-btn-size-md flex w-full items-center justify-center gap-1.5 rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm disabled:opacity-70"
    >
        <span x-text="submitting ? 'Verifying…' : 'Unlock'"></span>
    </button>

    <div class="text-center text-sm">
        <button type="button" x-on:click="pinPad = false" class="text-gray-500 underline-offset-4 hover:underline dark:text-gray-400">
            Use email &amp; password instead
        </button>
    </div>
</div>
