{% extends 'account/base_account.html.twig' %}

{% block title %}Vérification en deux étapes — NUM-ECARD{% endblock %}

{% block body %}
<style>
    .tfa-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 50%);
        padding: 40px 20px;
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    }
    .tfa-card {
        width: 100%;
        max-width: 400px;
        background: white;
        border-radius: 20px;
        box-shadow: 0 4px 40px rgba(0,0,0,0.08);
        padding: 48px 40px;
        position: relative;
        overflow: hidden;
    }
    .tfa-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 4px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .tfa-icon {
        text-align: center;
        font-size: 52px;
        margin-bottom: 20px;
        line-height: 1;
    }
    .tfa-title {
        font-size: 26px;
        font-weight: 700;
        color: #1d1d1f;
        text-align: center;
        margin-bottom: 8px;
    }
    .tfa-subtitle {
        font-size: 14px;
        color: #86868b;
        text-align: center;
        margin-bottom: 32px;
        line-height: 1.5;
    }
    .tfa-input {
        width: 100%;
        padding: 16px;
        border: 1.5px solid #d2d2d7;
        border-radius: 12px;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 12px;
        text-align: center;
        color: #1d1d1f;
        background: #fafafa;
        transition: all 0.2s ease;
        box-sizing: border-box;
        font-family: 'SF Mono', 'Courier New', monospace;
        outline: none;
    }
    .tfa-input:focus {
        border-color: #667eea;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
    }
    .tfa-btn {
        width: 100%;
        padding: 16px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 16px;
        font-family: inherit;
    }
    .tfa-btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(102,126,234,0.4);
    }
    .tfa-hint {
        font-size: 12px;
        color: #86868b;
        text-align: center;
        margin-top: 20px;
        line-height: 1.5;
    }
    .tfa-error {
        background: #fff2f2;
        color: #c92a2a;
        padding: 12px 16px;
        border-radius: 10px;
        font-size: 14px;
        margin-bottom: 20px;
        border: 1px solid #ffc9c9;
        text-align: center;
    }
    .tfa-trusted {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        font-size: 13px;
        color: #86868b;
    }
    .tfa-trusted input[type="checkbox"] {
        accent-color: #667eea;
        width: 16px;
        height: 16px;
    }
</style>

<div class="tfa-page">
    <div class="tfa-card">

        <div class="tfa-icon">🔐</div>
        <h1 class="tfa-title">Vérification en deux étapes</h1>
        <p class="tfa-subtitle">
            Ouvrez votre application Authenticator<br>
            et saisissez le code à 6 chiffres.
        </p>

        {# Erreur d'authentification si code incorrect #}
        {% if app.request.query.get('_auth_code_status') == 'failure' %}
        <div class="tfa-error">
            ❌ Code incorrect. Vérifiez l'heure de votre téléphone et réessayez.
        </div>
        {% endif %}

        <form method="post" action="{{ path('2fa_login_check') }}" autocomplete="off">
            <input
                type="text"
                name="_auth_code"
                id="auth-code"
                class="tfa-input"
                maxlength="6"
                pattern="[0-9]{6}"
                inputmode="numeric"
                placeholder="000000"
                autofocus
                required
            >

            {# Token CSRF fourni par scheb/2fa-bundle #}
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('2fa') }}">

            {# Trusted device — se souvenir 30 jours #}
            <label class="tfa-trusted">
                <input type="checkbox" name="_trusted" value="1">
                Se souvenir de cet appareil pendant 30 jours
            </label>

            <button type="submit" class="tfa-btn">
                ✅ Valider le code
            </button>
        </form>

        <p class="tfa-hint">
            Code valide pendant <strong>30 secondes</strong>.<br>
            En cas de problème, contactez l'administrateur.
        </p>

    </div>
</div>

<script>
/* Auto-submit quand 6 chiffres saisis */
document.getElementById('auth-code').addEventListener('input', function() {
    if (this.value.replace(/\D/g, '').length === 6) {
        this.value = this.value.replace(/\D/g, '');
        this.closest('form').submit();
    }
});
/* Filtrer les saisies non numériques */
document.getElementById('auth-code').addEventListener('keypress', function(e) {
    if (!/[0-9]/.test(e.key)) e.preventDefault();
});
</script>
{% endblock %}