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

{% block title %}Renvoyer l'email de confirmation — NUM-ECARD{% endblock %}

{% block body %}
<div style="min-height: calc(100vh - 60px); display: flex; align-items: center;
            justify-content: center; padding: 40px 20px; background: #f0f4f8;">
    <div style="background: white; border-radius: 18px; padding: 48px 40px;
                max-width: 440px; width: 100%; box-shadow: 0 4px 24px rgba(0,0,0,0.08);">

        <div style="text-align: center; margin-bottom: 32px;">
            <div style="font-size: 40px; margin-bottom: 16px;">✉️</div>
            <h1 style="font-size: 22px; font-weight: 700; color: #1d1d1f; margin-bottom: 8px;">
                Renvoyer l'email de confirmation
            </h1>
            <p style="font-size: 14px; color: #6e6e73; line-height: 1.6;">
                Entrez l'adresse email utilisée lors de votre inscription.
                Nous vous renverrons le lien de confirmation.
            </p>
        </div>

        {% for msg in app.flashes('error') %}
            <div style="background: #fff2f2; border-left: 4px solid #ff3b30;
                        border-radius: 0 8px 8px 0; padding: 12px 16px;
                        font-size: 13px; color: #c92a2a; margin-bottom: 16px;">
                {{ msg }}
            </div>
        {% endfor %}

        {% for msg in app.flashes('warning') %}
            <div style="background: #fff3cd; border-left: 4px solid #ff9500;
                        border-radius: 0 8px 8px 0; padding: 12px 16px;
                        font-size: 13px; color: #7a4f00; margin-bottom: 16px;">
                {{ msg }}
            </div>
        {% endfor %}

        <form method="post" action="{{ path('app_resend_verification') }}">
            <div style="margin-bottom: 20px;">
                <label style="display: block; font-size: 13px; font-weight: 600;
                              color: #1d1d1f; margin-bottom: 8px;">
                    Adresse email
                </label>
                <input type="email" name="email" required
                       placeholder="votre@email.com"
                       style="width: 100%; padding: 12px 14px;
                              border: 1.5px solid #e5e5ea; border-radius: 10px;
                              font-size: 15px; color: #1d1d1f; background: white;
                              box-sizing: border-box;">
            </div>

            <button type="submit"
                    style="width: 100%; padding: 14px; background: #1A3C5E;
                           color: white; border: none; border-radius: 10px;
                           font-size: 15px; font-weight: 700; cursor: pointer;">
                📤 Renvoyer l'email
            </button>
        </form>

        <div style="text-align: center; margin-top: 24px;">
            <a href="{{ path('app_login') }}"
               style="font-size: 13px; color: #86868b; text-decoration: none;">
                ← Retour à la connexion
            </a>
        </div>

    </div>
</div>
{% endblock %}