@extends('layouts.guest')
@section('title', __('Two-factor authentication'))

@section('content')
<div x-data="{useRecovery:false}">
    <h1 class="text-3xl font-semibold tracking-tight text-slate-900 dark:text-white">{{ __('Two-factor authentication') }}</h1>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" x-show="!useRecovery">
        {{ __('Enter the 6-digit code from your authenticator app.') }}
    </p>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400" x-show="useRecovery" style="display:none">
        {{ __('Enter one of your recovery codes.') }}
    </p>

    @if($errors->any())
        <div class="mt-6 mb-4 px-4 py-3 rounded-xl bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-sm">{{ $errors->first() }}</div>
    @endif

    <form method="POST" action="{{ route('two-factor.login') }}" class="mt-8 space-y-4">
        @csrf
        <div x-show="!useRecovery">
            <label class="form-label">{{ __('Authentication code') }}</label>
            <input name="code" inputmode="numeric" autocomplete="one-time-code" autofocus
                   class="form-input text-center text-2xl tracking-[0.5em] font-mono" maxlength="6">
        </div>
        <div x-show="useRecovery" style="display:none">
            <label class="form-label">{{ __('Recovery code') }}</label>
            <input name="recovery_code" class="form-input">
        </div>
        <button class="btn-primary w-full">{{ __('Verify') }}</button>
    </form>

    <button @click="useRecovery=!useRecovery" class="mt-6 w-full text-center text-xs text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white hover:underline">
        <span x-show="!useRecovery">{{ __('Use a recovery code instead') }}</span>
        <span x-show="useRecovery" style="display:none">{{ __('Use authenticator code instead') }}</span>
    </button>
</div>
@endsection