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

{% block content %}
    <mj-section background-color="#f3f4f6" border-radius="12px" padding="20px">

        <mj-column>
            <mj-text font-family="Helvetica, Arial, sans-serif" color="#10b981" font-size="28px" font-weight="bold" align="center" padding-bottom="20px">
                ✅ Paiement Confirmé
            </mj-text>
        </mj-column>

        <mj-wrapper background-color="#ffffff" border-radius="8px" padding="20px" border="1px solid #e5e7eb" padding-bottom="20px">
            <mj-section padding="0">
                <mj-column width="100%">
                    <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 confirmons la bonne réception de votre paiement de cotisation. Merci beaucoup pour votre soutien ! Votre adhésion est maintenant active.
                    </mj-text>

                    <mj-table padding="5px 0" width="100%" color="#374151" font-size="14px">
                        <tr style="border-bottom: 1px solid #e5e7eb;">
                            <td style="font-weight: bold; padding: 10px 0;">Période d'Adhésion :</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>

                    <mj-table padding="5px 0" width="100%">
                        <tr>
                            <td style="font-weight: bold; padding: 10px 0; color: #374151; font-size: 14px;">Montant Payé :</td>
                            <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>

        <mj-column>

            <mj-text font-family="Helvetica, Arial, sans-serif" color="#6b7280" font-size="12px" align="center" padding-top="15px">
                Une question ? Contactez-nous.
            </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.
            </mj-text>
        </mj-column>

    </mj-section>
{% endblock %}