{% extends 'base.html.twig' %}

{% block title %}Code de vérification{% endblock %}

{% block login %}
    <div class="card shadow" style="width: 100%; max-width: 420px;">
        <div class="card-body p-4">
            <div class="text-center mb-3">
                <img src="{{ asset('alphavigie-logo.png') }}" alt="Alphavigie" style="max-height: 70px;">
            </div>
            <h1 class="h5 mb-3 text-center">Vérification en deux étapes</h1>
            <p class="text-muted small text-center mb-4">
                Un code à 6 chiffres a été envoyé à votre adresse email.
                Saisissez-le ci-dessous pour terminer la connexion.
            </p>

            {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
            {% endif %}

            <form method="post" action="{{ path('app_2fa') }}">
                <div class="mb-3">
                    <label for="code" class="form-label">Code</label>
                    <input type="text" name="code" id="code"
                           class="form-control form-control-lg text-center"
                           style="letter-spacing: 8px; font-size: 1.5rem;"
                           inputmode="numeric"
                           pattern="\d{6}"
                           maxlength="6"
                           autocomplete="one-time-code"
                           required autofocus
                           placeholder="000000">
                </div>
                <button class="btn btn-primary w-100" type="submit">
                    <i class="bi bi-shield-check me-1"></i> Valider
                </button>
            </form>

            <form method="post" action="{{ path('app_2fa_resend') }}" class="mt-3 text-center">
                <button type="submit" class="btn btn-link btn-sm">
                    <i class="bi bi-arrow-repeat me-1"></i> Renvoyer un code
                </button>
            </form>

            <div class="mt-2 text-center">
                <a href="{{ path('app_logout', {_csrf_token: csrf_token('logout')}) }}" class="text-muted small">Annuler et se déconnecter</a>
            </div>
        </div>
    </div>
{% endblock %}