Auth

@props([
    // WebAuthn endpoints: options (returns request options JSON) and verify
    // (POST, receives the assertion). The defaults are the laravel/passkeys
    // routes; any backend works.
    'optionsUrl' => '/passkeys/login/options',
    'verifyUrl' => '/passkeys/login',
    // Where to go after a successful sign-in (a `redirect` in the verify
    // response wins).
    'redirect' => '/',
    // Backend contract, passed to the passkey item: 'laravel-passkeys' or null,
    // and the single settings a preset makes (see the passkey item).
    'preset' => null,
    'optionsMethod' => null,
    'optionsKey' => null,
    'credentialKey' => null,
    // Extra verify body fields, for example ['remember' => true].
    'body' => [],
    // The other way in: a passkey is never the only path.
    'fallbackHref' => '#',
    'fallbackLabel' => 'Sign in with email instead',
    'signupHref' => null,
    'heading' => 'Sign in',
    'headingTag' => 'h2',
])

{{--
    Auth Passkey — sign in with a passkey. One primary action runs the WebAuthn
    ceremony through <x-ui.passkey>; its status line explains a dismissed
    prompt, a server error or a browser without passkey support, and a link
    always offers the other sign-in method.
--}}
@php
    $headingTag = in_array($headingTag, ['h1', 'h2', 'h3'], true) ? $headingTag : 'h2';
@endphp

<x-ui.section
    data-slot="block-auth-passkey"
    aria-labelledby="auth-passkey-heading"
    space="md" class="flex min-h-[36rem] items-center justify-center px-4" {{ $attributes }}
>
    <x-ui.card class="w-full max-w-md">
        <x-ui.card.header class="items-center text-center">
            <div class="mb-4 grid size-10 shrink-0 place-items-center rounded-md bg-muted text-foreground" aria-hidden="true">
                <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4" /><path d="m10.85 12.15 7.65-7.65M18 5l2 2M15 8l2 2" /></svg>
            </div>
            <{{ $headingTag }} id="auth-passkey-heading" class="text-xl font-semibold tracking-tight text-card-foreground">{{ __($heading) }}</{{ $headingTag }}>
            <x-ui.card.description>
                {{ __('Use the passkey saved on this device, a phone nearby or a security key. No password needed.') }}
            </x-ui.card.description>
        </x-ui.card.header>

        <x-ui.card.content class="flex flex-col gap-6">
            <x-ui.passkey
                :options-url="$optionsUrl" :verify-url="$verifyUrl" :redirect="$redirect"
                :preset="$preset" :options-method="$optionsMethod" :options-key="$optionsKey"
                :credential-key="$credentialKey" :body="$body"
            />

            <div class="relative flex items-center gap-4">
                <span class="h-px flex-1 bg-border" aria-hidden="true"></span>
                <span class="text-xs text-muted-foreground">{{ __('or') }}</span>
                <span class="h-px flex-1 bg-border" aria-hidden="true"></span>
            </div>

            <x-ui.button :href="$fallbackHref" variant="outline" class="w-full">{{ __($fallbackLabel) }}</x-ui.button>
        </x-ui.card.content>

        @if (filled($signupHref))
            <x-ui.card.footer class="justify-center">
                <p class="text-center text-sm text-muted-foreground">
                    {{ __("Don't have an account?") }}
                    <a href="{{ $signupHref }}" class="ms-2 font-medium text-link hover:underline">{{ __('Sign up') }}</a>
                </p>
            </x-ui.card.footer>
        @endif
    </x-ui.card>
</x-ui.section>