<x-guest-layout>
    <div class="text-center text-primary mb-5">
        <h3 class="fw-bold">{{ __('Two-Factor Authentication') }}</h3>
        <p class="text-muted">{{ __('Please enter the verification code sent to your email.') }}</p>
    </div>

    @if (session('error'))
        <div class="alert alert-danger">{{ session('error') }}</div>
    @endif

    @if (app()->environment('local') && session('dev_otp'))
        <div class="alert alert-info border-0 shadow-sm mb-4">
            <i class="bi bi-info-circle me-2"></i>
            <strong>Developer Tip:</strong> Your OTP code is <code>{{ session('dev_otp') }}</code>
        </div>
    @endif

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

        <div class="form-floating mb-3">
            <input type="text" name="code" class="form-control" id="2fa_code" placeholder="Enter code" required autofocus maxlength="6">
            <label for="2fa_code">Verification Code</label>
        </div>

        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="trust_device" id="trust_device">
            <label class="form-check-label small text-muted" for="trust_device">
                {{ __('Trust this device for') }} {{ get_setting('two_factor_trust_days', 30) }} {{ __('days') }}
            </label>
        </div>

        <button type="submit" class="btn btn-lg btn-primary theme-black w-100 mb-3">
            {{ __('Verify') }}
        </button>

        <div class="text-center">
            <a href="{{ route('login') }}" class="text-primary small">{{ __('Back to Login') }}</a>
        </div>
    </form>
</x-guest-layout>
