@props([
    'optionsRoute' => 'passkey.login-options',
    'submitRoute' => 'passkey.login',
    'label' => __('Iniciar sesión con clave de acceso'),
    'loadingLabel' => __('Autenticando...'),
    'separator' => __('O continuar con correo electrónico'),
])

@assets
@vite('resources/js/passkeys.js')
@endassets

<div
    x-data="{
        supported: false,
        loading: false,
        error: null,
        updateSupport() {
            this.supported = Boolean(window.Passkeys?.isSupported());
        },
        init() {
            this.updateSupport();

            window.addEventListener('passkeys:ready', () => this.updateSupport(), { once: true });
        },
        async verify() {
            this.loading = true;
            this.error = null;

            try {
                const response = await window.Passkeys.verify({
                    routes: {
                        options: '{{ route($optionsRoute) }}',
                        submit: '{{ route($submitRoute) }}',
                    },
                });

                Livewire.navigate(response.redirect || '/dashboard');

            } catch (e) {

                if (e.constructor?.name !== 'UserCancelledError') {
                    this.error = e.message;
                }

            } finally {
                this.loading = false;
            }
        },
    }"
>
    <template x-if="supported">

        <div>

            <div class="grid gap-2">

                <flux:button
                    variant="outline"
                    icon="finger-print"
                    class="w-full"
                    x-on:click="verify()"
                    x-bind:disabled="loading"
                >
                    <span x-show="!loading">
                        {{ $label }}
                    </span>

                    <span x-show="loading" x-cloak>
                        {{ $loadingLabel }}
                    </span>
                </flux:button>

                <p
                    x-show="error"
                    x-text="error"
                    x-cloak
                    class="text-center text-sm text-red-600 dark:text-red-400"
                ></p>

            </div>


            <div class="relative my-6">

                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-zinc-200"></div>
                </div>

                <div class="relative flex justify-center text-xs uppercase">

                    <span class="bg-white px-2 text-zinc-500">
                        {{ $separator }}
                    </span>

                </div>

            </div>

        </div>

    </template>
</div>