@php
    $field = 'h-14 w-full rounded-md border border-line bg-inset text-center font-mono text-2xl font-semibold tracking-[0.5em] text-ink caret-accent placeholder:text-ink-4 focus:border-accent/40 focus:outline-none';
    $label = 'mb-1.5 block font-mono text-[11px] uppercase tracking-wider text-ink-3';
    $err = 'mt-1.5 flex items-center gap-1.5 font-mono text-[11px] text-offline';
@endphp

<div class="space-y-7">
    <div class="space-y-1.5">
        <p class="font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-accent-text">{{ __('auth.two_factor') }}</p>
        <h1 class="font-display text-2xl font-bold tracking-tight text-ink">{{ __('auth.challenge_heading') }}</h1>
        <p class="font-mono text-xs text-ink-3">{{ $this->pendingHasTotp ? __('auth.challenge_subtitle') : __('auth.challenge_key_subtitle') }}</p>
    </div>

    @if (! $this->pendingHasTotp && $this->webauthnAvailable())
        {{-- Key-only: the security key is the primary path. --}}
        <x-btn variant="primary" size="lg" class="w-full" x-data x-on:click="window.clusevWebauthn?.login($wire)">
            <x-icon name="shield" class="h-4 w-4" /> {{ __('auth.webauthn_login') }}
        </x-btn>
    @endif

    @if ($this->pendingHasTotp)
        <form wire:submit="verify" class="space-y-4">
            <div>
                <label for="code" class="{{ $label }}">{{ __('auth.code') }}</label>
                <input wire:model="code" id="code" inputmode="text" autocomplete="one-time-code" autofocus
                       class="{{ $field }}" placeholder="000000" />
                @error('code') <p class="{{ $err }}"><x-icon name="alert" class="h-3.5 w-3.5 shrink-0" />{{ $message }}</p> @enderror
            </div>

            <x-btn variant="primary" size="lg" type="submit" class="w-full" wire:loading.attr="disabled" wire:target="verify">
                <svg wire:loading wire:target="verify" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                <span wire:loading.remove wire:target="verify">{{ __('common.confirm') }}</span>
                <span wire:loading wire:target="verify">{{ __('auth.checking') }}</span>
            </x-btn>
        </form>

        @if ($this->webauthnAvailable())
            {{-- TOTP + key: the security key is the alternate path. --}}
            <div class="flex items-center gap-3">
                <span class="h-px flex-1 bg-line"></span>
                <span class="font-mono text-[10px] uppercase tracking-wider text-ink-4">{{ __('common.or') }}</span>
                <span class="h-px flex-1 bg-line"></span>
            </div>
            <x-btn variant="secondary" size="lg" class="w-full" x-data x-on:click="window.clusevWebauthn?.login($wire)">
                <x-icon name="shield" class="h-4 w-4" /> {{ __('auth.webauthn_login') }}
            </x-btn>
        @endif
    @endif

    {{-- Backup code lives on its own view — a deliberate, subordinate step. --}}
    <x-btn variant="secondary" size="lg" class="w-full" :href="route('two-factor.challenge.backup')" wire:navigate>
        {{ __('auth.challenge_use_backup') }}
    </x-btn>

    <div class="flex justify-center">
        <a href="{{ route('login') }}" wire:navigate class="inline-flex items-center gap-1.5 font-mono text-[11px] text-ink-4 transition-colors hover:text-ink-2">
            <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('auth.back_to_login') }}
        </a>
    </div>
</div>