{# templates/app/2fa/code.html.twig #}
{% extends 'app/base.html.twig' %}

{% block title %}Vérification double authentification — GestRestoSco{% endblock %}

{% block body %}

<div class="row justify-content-center mt-5">
    <div class="col-sm-8 col-md-6 col-lg-4">

        <div class="text-center mb-4">
            <div class="display-4 mb-2">🔐</div>
            <h1 class="h4 fw-bold">Vérification en deux étapes</h1>
            <p class="text-muted">
                {% if email_sent %}
                    Un code à 6 chiffres a été envoyé à votre adresse email.
                {% else %}
                    <span class="text-warning fw-semibold">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        L'email n'a pas pu être envoyé (erreur SMTP).
                        Contactez l'administrateur ou cliquez sur « Renvoyer le code ».
                    </span>
                {% endif %}
            </p>
        </div>

        {% for label, messages in app.flashes %}
            {% for msg in messages %}
                <div class="alert alert-{{ label == 'error' ? 'danger' : (label == 'warning' ? 'warning' : 'success') }} alert-dismissible">
                    {{ msg|raw }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            {% endfor %}
        {% endfor %}

        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">

                <form method="post" action="{{ path('tenant_2fa_check') }}" novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token('2fa_check') }}">

                    <div class="mb-3">
                        <label for="code" class="form-label fw-semibold">Code de vérification</label>
                        <input type="text" id="code" name="code" class="form-control form-control-lg text-center fw-bold"
                               inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code"
                               placeholder="• • • • • •" required autofocus
                               style="letter-spacing: 0.5em; font-size: 1.5rem;">
                        <div class="form-text text-center">Code valable 10 minutes.</div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-check-circle me-2"></i>Vérifier le code
                        </button>
                    </div>
                </form>

                <hr class="my-3">

                <form method="post" action="{{ path('tenant_2fa_resend') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('2fa_resend') }}">
                    <div class="d-grid">
                        <button type="submit" class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-redo me-1"></i>Renvoyer le code
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="text-center mt-3">
            <a href="{{ path('tenant_logout') }}" class="text-muted small">
                <i class="fas fa-sign-out-alt me-1"></i>Se déconnecter
            </a>
        </div>
    </div>
</div>

{% endblock body %}