{% extends 'mails/base.twig' %}

{% block content %}
    <!-- Section principale - Fond clair (Light Gray) -->
    <mj-section background-color="#f3f4f6" border-radius="12px" padding="20px">

        <!-- Colonne pour le Titre -->
        <mj-column>
            <!-- Titre -->
            <mj-text font-family="Helvetica, Arial, sans-serif" color="#4f46e5" font-size="28px" font-weight="bold" align="center" padding-bottom="20px">
                Votre Cotisation Annuelle
            </mj-text>
        </mj-column>

        <!-- Carte d'information (fond blanc) - Correction: Remplacement de <mj-group> par <mj-wrapper> -->
        <mj-wrapper background-color="#ffffff" border-radius="8px" padding="20px" css-class="card-container" border="1px solid #e5e7eb" padding-bottom="20px">
            <mj-section padding="0">
                <mj-column width="100%">
                    <!-- Texte principal : couleur sombre -->
                    <mj-text font-family="Helvetica, Arial, sans-serif" color="#374151" font-size="16px" line-height="1.6" padding-bottom="0">
                        Bonjour <strong>{{ datas.pseudo }}</strong>,
                    </mj-text>

                    <mj-text font-family="Helvetica, Arial, sans-serif" color="#374151" font-size="16px" line-height="1.6" padding-top="0" padding-bottom="20px">
                        Nous vous remercions de votre engagement. Veuillez trouver ci-dessous les détails de votre cotisation pour la période à venir.
                    </mj-text>

                    <!-- Détails de la Cotisation : Période -->
                    <mj-table padding="5px 0" width="100%" color="#374151" font-size="14px">
                        <!-- Bordure très claire -->
                        <tr style="border-bottom: 1px solid #e5e7eb;">
                            <td style="font-weight: bold; padding: 10px 0;">Période :</td>
                            <td style="text-align: right; padding: 10px 0;">Du {{ datas.start_at|date('d/m/Y') }} au {{ datas.end_at|date('d/m/Y') }}</td>
                        </tr>
                    </mj-table>

                    <!-- Détails de la Cotisation : Montant -->
                    <mj-table padding="5px 0" width="100%">
                        <tr>
                            <td style="font-weight: bold; padding: 10px 0; color: #374151; font-size: 14px;">Montant total :</td>
                            <!-- Couleur d'accentuation verte conservée -->
                            <td style="text-align: right; padding: 10px 0; color: #10b981; font-size: 18px; font-weight: bold;">{{ datas.amount|format_currency('EUR', locale='fr') }}</td>
                        </tr>
                    </mj-table>
                </mj-column>
            </mj-section>
        </mj-wrapper>

        <!-- Colonne pour le Bouton et le bas de page -->
        <mj-column>
            <!-- Bouton de Paiement (couleur d'accentuation conservée) -->
            <mj-button href="{{ datas.link }}" background-color="#4f46e5" color="#ffffff" font-size="16px" font-weight="bold" border-radius="8px" padding-top="25px" padding-bottom="25px">
                Procéder au Paiement Sécurisé
            </mj-button>

            <!-- Note de bas de page : couleur de texte gris moyen -->
            <mj-text font-family="Helvetica, Arial, sans-serif" color="#6b7280" font-size="12px" align="center" padding-top="15px">
                Si le bouton ne fonctionne pas, veuillez copier-coller ce lien dans votre navigateur :<br>
                <a href="{{ datas.link }}" style="color: #4f46e5; text-decoration: underline; word-break: break-all;">{{ datas.link }}</a>
            </mj-text>

            <mj-text font-family="Helvetica, Arial, sans-serif" color="#6b7280" font-size="12px" align="center" padding-top="10px">
                Cet e-mail est envoyé automatiquement. Merci de ne pas y répondre.
            </mj-text>
        </mj-column>

    </mj-section>


{% endblock %}