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

{% block title %}
    {{ 'Vérification de votre adresse e-mail'|trans }}
{% endblock %}

{% block body %}
    <section class="w-100 m-auto py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 col-lg-6">
                    <div class="card shadow-sm">
                        <div class="card-body text-center p-5">
                            <h1 class="h3 mb-4">{{ 'Vérifiez votre boîte e-mail'|trans }}</h1>

                            <p class="text-muted">
                                {{ 'Un e-mail de vérification a été envoyé à votre adresse.'|trans }}
                            </p>
                            <p class="text-muted mb-4">
                                {{ "Cliquez sur le lien dans l'e-mail pour activer votre compte."|trans }}
                            </p>

                            {# Instructions détaillées #}
                            <div class="alert alert-info text-start mb-4">
                                <h6 class="fw-bold mb-2">{{ 'Que faire maintenant ?'|trans }}</h6>
                                <ol class="mb-0 ps-3">
                                    <li class="mb-1">{{ 'Consultez votre boîte de réception'|trans }}</li>
                                    <li class="mb-1">{{ 'Vérifiez aussi vos dossiers spam/courrier indésirable'|trans }}</li>
                                    <li class="mb-1">{{ "Cliquez sur le lien de validation dans l'e-mail"|trans }}</li>
                                </ol>
                            </div>

                            {# Informations importantes #}
                            <div class="border rounded p-3 mb-4 bg-light">
                                <small class="text-muted">
                                    <strong>{{ 'Important :'|trans }}</strong><br>
                                    {{ 'Le lien de validation expire dans 15 minutes.'|trans }}<br>
                                    {{ "Si vous ne trouvez pas l'e-mail, vérifiez que l'adresse saisie est correcte."|trans }}
                                </small>
                            </div>

                            {# Actions #}
                            <div class="d-grid gap-2">
                                <a href="{{ path('app_login') }}" class="btn btn-outline-primary">
                                    {{ "J'ai déjà un compte, me connecter"|trans }}
                                </a>
                            </div>

                            {# Support #}
                            <div class="mt-4 pt-3 border-top">
                                <small class="text-muted">
                                    {{ 'Vous rencontrez des difficultés ?'|trans }}
                                    <a href="{{ path('@Contact_index') }}" class="text-decoration-none">
                                        {{ 'Contactez-nous'|trans }}
                                    </a>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}