<div class="flex min-h-screen items-center justify-center bg-bg px-6 py-12">
    <div class="w-full max-w-sm animate-rise">
        <x-ui.brand size="md" class="mb-9" />

        <h1 class="text-2xl font-bold leading-tight tracking-tight text-ink">{{ __('auth.twofa_title') }}</h1>
        <p class="mt-2 text-sm text-muted">
            {{ $usingRecovery ? __('auth.twofa_recovery_subtitle') : __('auth.twofa_subtitle') }}
        </p>

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

        <form wire:submit="verify" class="mt-8 space-y-5">
            @if ($usingRecovery)
                <x-ui.input name="recoveryCode" type="text" wire:model="recoveryCode" :label="__('auth.recovery_code')" autocomplete="one-time-code" autofocus />
            @else
                <x-ui.otp-input name="code" wire:model="code" :label="__('auth.otp_digit')" />
            @endif
            <x-ui.button type="submit" variant="primary" size="md" class="w-full">{{ __('auth.verify') }}</x-ui.button>
        </form>

        <button type="button" class="mt-4 text-sm font-medium text-accent-text hover:underline" wire:click="$toggle('usingRecovery')">
            {{ $usingRecovery ? __('auth.use_otp') : __('auth.use_recovery') }}
        </button>
    </div>
</div>
