{% extends "base.html" %}
{% block title %}{% trans %}Two-Factor Verification{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="min-h-[60vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-sm">
        <div class="text-center mb-8">
            <div class="w-16 h-16 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-shield-halved text-2xl text-purple-600 dark:text-purple-400"></i>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans %}Two-Factor Verification{% endtrans %}</h1>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{% trans %}Enter the 6-digit code from your authenticator app to continue.{% endtrans %}</p>
        </div>

        {% if error %}
        <div class="mb-5 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-sm text-red-700 dark:text-red-400" data-testid="alert-2fa-error">
            <i class="fa fa-exclamation-circle mr-1"></i> {{ error }}
        </div>
        {% endif %}

        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6">
            <form method="POST" action="{{ full_url('/account/2fa/verify') }}">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 text-center">{% trans %}Authentication Code{% endtrans %}</label>
                <input type="text" name="code" maxlength="6" inputmode="numeric" pattern="[0-9]{6}"
                    autocomplete="one-time-code" autofocus required
                    class="w-full px-4 py-4 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-center text-3xl font-mono tracking-[0.7em] focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary mb-5"
                    placeholder="••••••" data-testid="input-verify-2fa-code">
                <button type="submit" class="w-full py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-bold text-base transition-all shadow-lg shadow-primary/20" data-testid="btn-verify-2fa">
                    {% trans %}Verify & Sign In{% endtrans %}
                </button>
            </form>
        </div>

        <p class="mt-4 text-center text-xs text-gray-400 dark:text-gray-500">
            {% trans %}Lost access to your authenticator?{% endtrans %} <a href="{{ full_url('/forgot-password') }}" class="text-primary dark:text-primary-light hover:underline">{% trans %}Contact support{% endtrans %}</a>
        </p>
        <p class="mt-2 text-center text-xs text-gray-400 dark:text-gray-500">
            <a href="{{ full_url('/login') }}" class="text-primary dark:text-primary-light hover:underline"><i class="fa fa-arrow-left mr-1"></i>{% trans %}Back to login{% endtrans %}</a>
        </p>
    </div>
</div>
{% endblock %}