<div class="flex min-h-screen items-center justify-center p-6" x-data="{ recovery: false }">
    <div class="w-full max-w-sm">
        <div class="mb-6 flex justify-center"><x-ui.brand size="md" /></div>

        <x-ui.card>
            <h1 class="text-lg font-semibold text-ink">{{ __('auth.twofa_title') }}</h1>
            <p x-show="! recovery" class="mt-1 text-sm text-muted">{{ __('auth.twofa_subtitle') }}</p>
            <p x-show="recovery" x-cloak class="mt-1 text-sm text-muted">{{ __('auth.twofa_recovery_subtitle') }}</p>

            @error('code')
                <x-ui.alert variant="danger" class="mt-4">{{ $message }}</x-ui.alert>
            @enderror
            @error('recovery_code')
                <x-ui.alert variant="danger" class="mt-4">{{ $message }}</x-ui.alert>
            @enderror

            {{-- TOTP code --}}
            <form x-show="! recovery" method="POST" action="{{ route('two-factor.login.store') }}" class="mt-5 space-y-4">
                @csrf
                <x-ui.otp-input name="code" :label="__('auth.otp_digit')" />
                <x-ui.button type="submit" variant="primary" class="w-full">{{ __('auth.verify') }}</x-ui.button>
            </form>

            {{-- Recovery code fallback --}}
            <form x-show="recovery" x-cloak method="POST" action="{{ route('two-factor.login.store') }}" class="mt-5 space-y-4">
                @csrf
                <x-ui.input name="recovery_code" :label="__('auth.recovery_code')" autocomplete="one-time-code" />
                <x-ui.button type="submit" variant="primary" class="w-full">{{ __('auth.verify') }}</x-ui.button>
            </form>

            <button type="button" class="mt-4 text-sm font-medium text-accent-text hover:underline" @click="recovery = ! recovery">
                <span x-show="! recovery">{{ __('auth.use_recovery') }}</span>
                <span x-show="recovery" x-cloak>{{ __('auth.use_otp') }}</span>
            </button>
        </x-ui.card>
    </div>
</div>
