@extends('layouts.guest')

@section('title', 'Two-factor verification')

@section('content')
    <div class="mb-7">
        <p class="text-xs font-medium uppercase tracking-widest text-muted-foreground">Security check</p>
        <h2 class="mt-2 text-2xl font-semibold tracking-tight text-foreground">Verify your sign in</h2>
        <p class="mt-2 text-sm text-muted-foreground">Enter the 6-digit code from your authenticator app. A one-time recovery code also works.</p>
    </div>

    <form method="POST" action="{{ route('two-factor.challenge.store') }}" class="space-y-5">
        @csrf
        <div>
            <label for="code" class="mf-field-label">Authenticator or recovery code</label>
            <input id="code" name="code" type="text" inputmode="text" autocomplete="one-time-code" autofocus required class="mf-input @error('code') is-invalid @enderror" placeholder="123456 or XXXX-XXXX-XXXX">
            @error('code')<p class="mf-field-error">{{ $message }}</p>@enderror
        </div>
        <button type="submit" class="mf-btn mf-btn-primary h-10 w-full">Verify and continue</button>
        <a href="{{ route('login') }}" class="mf-btn h-10 w-full">Back to sign in</a>
    </form>
@endsection
