@extends('layouts.guest')
@section('title', 'Two-factor authentication')
@section('subtitle', 'Enter the 6-digit code from your authenticator app')

@section('content')
<form method="POST" action="{{ route('two-factor.challenge') }}" class="space-y-4">
    @csrf
    <div>
        <label for="code" class="label">Authentication code</label>
        <input id="code" name="code" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6"
               required autofocus autocomplete="one-time-code" class="input text-center text-lg tracking-[0.5em]">
        <x-field-error field="code"/>
    </div>
    <button type="submit" class="btn-primary w-full">Verify</button>
    <a href="{{ route('login') }}" class="block text-center text-sm text-slate-500 hover:text-slate-700 dark:hover:text-slate-300">Back to sign in</a>
</form>
@endsection