{{-- Two-factor challenge shown by Fortify after a correct password when the
     account has confirmed 2FA. Same guest shell as the login page. The user
     submits EITHER a time-based code OR a one-time recovery code — the two
     inputs are toggled and the inactive one is disabled so only one is sent. --}}
<x-layouts.guest :title="__('Two-factor authentication')">
    <div class="mb-6">
        <h1 class="rf-auth-title">{{ __('Two-factor authentication') }}</h1>
        <p class="rf-auth-sub" x-show="!recovery">{{ __('Enter the code from your authenticator app to continue.') }}</p>
        <p class="rf-auth-sub" x-show="recovery" x-cloak>{{ __('Enter one of your emergency recovery codes.') }}</p>
    </div>

    @if ($errors->any())
        <div class="rf-alert rf-alert-danger mb-4">{{ $errors->first() }}</div>
    @endif

    <div x-data="{ recovery: false }">
        <form method="POST" action="{{ route('two-factor.login') }}" class="space-y-4">
            @csrf

            <div x-show="!recovery">
                <label class="rf-label" for="code">{{ __('Authentication code') }}</label>
                <input id="code" type="text" name="code" inputmode="numeric" autocomplete="one-time-code"
                       autofocus class="rf-input rf-mono" placeholder="123456" :disabled="recovery">
            </div>

            <div x-show="recovery" x-cloak>
                <label class="rf-label" for="recovery_code">{{ __('Recovery code') }}</label>
                <input id="recovery_code" type="text" name="recovery_code" autocomplete="one-time-code"
                       class="rf-input rf-mono" placeholder="xxxxxxxx-xxxxxxxx" :disabled="!recovery">
            </div>

            <button type="submit" class="rf-btn rf-btn-primary rf-btn-lg w-full">{{ __('Continue') }}</button>
        </form>

        <p class="rf-auth-foot">
            <a href="#" class="rf-auth-link" @click.prevent="recovery = !recovery"
               x-text="recovery ? @js(__('Use an authentication code')) : @js(__('Use a recovery code'))"></a>
        </p>
    </div>
</x-layouts.guest>