@extends('layouts.auth')

@section('title', 'Two-Factor Authentication | ' . config('app.name'))

@section('content')
<div class="auth-card">
    <h1 class="auth-title">Two-Factor Authentication</h1>
    <p class="auth-subtitle">Enter the 6-digit code from your authenticator app</p>

    @if($errors->any())
        <div class="auth-error">
            <i class="bi bi-exclamation-circle-fill"></i>
            <span>{{ $errors->first() }}</span>
        </div>
    @endif

    <form method="POST" action="{{ route('2fa.verify') }}">
        @csrf

        <div class="form-group">
            <label class="form-label">Authentication Code</label>
            <input type="text" name="code" class="form-input"
                   inputmode="numeric" pattern="[0-9]*" maxlength="6"
                   placeholder="000000" autofocus autocomplete="one-time-code"
                   style="letter-spacing: 0.3em; font-size: 22px; text-align: center;">
        </div>

        <button type="submit" class="btn-primary">Verify</button>
    </form>
</div>
@endsection