@extends('layouts.app')

@section('title', 'Two-Factor Verification')

@section('content')
<div class="text-center mb-4">
    <i class="bi bi-shield-lock" style="font-size:48px;color:#FFD700;"></i>
    <h3 class="mt-2">Two-Factor Verification</h3>
    <p class="text-muted mb-0">{{ $user->name }}</p>
    <p class="text-muted">Enter the 6-digit code from your authenticator app.</p>
</div>

@if($errors->any())
<div class="alert alert-danger">
    @foreach($errors->all() as $error)
    <div>{{ $error }}</div>
    @endforeach
</div>
@endif

<form method="POST" action="{{ route('mfa.verify') }}">
    @csrf
    <div class="mb-3">
        <label class="form-label">Verification Code</label>
        <input type="text" name="code" class="form-control text-center" maxlength="6" inputmode="numeric" autocomplete="one-time-code" autofocus required>
    </div>
    <button type="submit" class="btn btn-yellow w-100">Verify & Sign In</button>
</form>

<div class="text-center mt-3">
    <a href="{{ route('login') }}" class="text-decoration-none small">Cancel and return to login</a>
</div>
@endsection