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

{% block content %}

    {# --- Section Header (Logo/Titre) --- #}
    <mj-section background-color="#4f46e5" padding-bottom="0">
        <mj-column>
            <mj-text align="center" font-size="24px" color="#ffffff" font-family="Helvetica Neue, Arial">
                Confirmation de votre Don
            </mj-text>
            <mj-text align="center" font-size="16px" color="#a5a2fa" font-family="Helvetica Neue, Arial" padding-top="0" padding-bottom="20px">
                Un immense merci pour votre générosité !
            </mj-text>
        </mj-column>
    </mj-section>

    {# --- Section Confirmation & Montant --- #}
    <mj-section background-color="#ffffff">
        <mj-column>

            {# Montant du Don (Mis en évidence) #}
            <mj-text font-size="16px" color="#555555" font-family="Helvetica Neue, Arial" align="center">
                Nous avons bien reçu votre soutien d'un montant de :
            </mj-text>
            <mj-text font-size="36px" font-weight="bold" color="#10b981" font-family="Helvetica Neue, Arial" align="center" padding-bottom="20px">
                {{ datas.don.amount|format_currency('EUR', locale='fr') }}
            </mj-text>

            <mj-divider border-color="#e0e0e0" border-width="1px" padding="0 20px"></mj-divider>

            {# Message de remerciement standard #}
            <mj-text font-size="16px" color="#555555" font-family="Helvetica Neue, Arial" padding-top="20px">
                Bonjour {% if datas.don.name %}{{ datas.don.name }}{% else %}Cher Donateur{% endif %},
            </mj-text>
            <mj-text font-size="16px" color="#555555" font-family="Helvetica Neue, Arial">
                Votre don a été confirmé avec succès. Votre contribution est essentielle pour l'organisation de nos événements, l'achat de matériel et le maintien de nos activités.
            </mj-text>
        </mj-column>
    </mj-section>

    {# --- Section Détails du Don --- #}
    <mj-section background-color="#ffffff" padding-top="0">
        <mj-column border="1px solid #e0eeef" padding="10px" border-radius="4px">
            <mj-text font-size="18px" font-weight="bold" color="#4f46e5" font-family="Helvetica Neue, Arial" padding-bottom="10px">
                Détails de votre transaction
            </mj-text>

            {# Nom / Pseudo #}
            <mj-table font-size="14px" color="#555555" font-family="Helvetica Neue, Arial" padding-bottom="5px">
                <tr>
                    <td style="width: 150px; padding-bottom: 5px;">Nom/Pseudo :</td>
                    <td style="font-weight: bold; padding-bottom: 5px;">{% if datas.don.name %}{{ datas.don.name }}{% else %}Anonyme{% endif %}</td>
                </tr>
            </mj-table>

            {# Montant #}
            <mj-table font-size="14px" color="#555555" font-family="Helvetica Neue, Arial" padding-bottom="5px">
                <tr>
                    <td style="width: 150px; padding-bottom: 5px;">Montant :</td>
                    <td style="font-weight: bold; color: #10b981; padding-bottom: 5px;">{{ datas.don.amount|format_currency('EUR', locale='fr') }}</td>
                </tr>
            </mj-table>

            {# Message facultatif #}
            {% if datas.don.message %}
                <mj-table font-size="14px" color="#555555" font-family="Helvetica Neue, Arial" padding-top="10px">
                    <tr>
                        <td style="width: 150px; vertical-align: top;">Message :</td>
                        <td><em style="color: #777;">"{{ datas.don.message }}"</em></td>
                    </tr>
                </mj-table>
            {% endif %}
        </mj-column>
    </mj-section>

    {# --- Section Reçu Fiscal & Non-déductibilité (MIS À JOUR) --- #}
    <mj-section background-color="#f4f4f4">
        <mj-column>

            {# Message concernant le Reçu Fiscal en Pièce Jointe #}
            <mj-text font-size="15px" color="#333333" font-family="Helvetica Neue, Arial" align="center" padding-bottom="5px">
                <span style="font-size: 20px;">📎</span>
                <span style="font-weight: bold; color: #4f46e5;">Votre reçu se trouve en pièce jointe de cet e-mail.</span>
            </mj-text>

            {# Message d'avertissement sur la réduction d'impôt #}
            <mj-text font-size="14px" color="#993300" font-family="Helvetica Neue, Arial" align="center" font-style="italic" padding-bottom="15px">
                <strong>NOTE IMPORTANTE :</strong> Notez que notre association ne vous permet pas de bénéficier d'une réduction d'impôt.
            </mj-text>

            <mj-text font-size="12px" color="#999999" font-family="Helvetica Neue, Arial" align="center">
                Si vous avez des questions, n'hésitez pas à nous contacter.
            </mj-text>
        </mj-column>
    </mj-section>
{% endblock %}
