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

{% block content %}
    <mj-section padding="20px">
        <mj-column background-color="#ffffff" border-radius="24px" padding="30px" css-class="shadow">

            {# Icône d'alerte / prélèvement #}
            <mj-image src="https://cdn-icons-png.flaticon.com/512/595/595067.png" width="60px" padding-bottom="20px" />

            <mj-text align="center" font-size="28px" font-weight="900" color="#0f172a" text-transform="uppercase" font-style="italic" padding-bottom="0px">
                Caution <span color="#e11d48">Encaissée</span>
            </mj-text>

            <mj-text align="center" font-size="10px" font-weight="800" color="#64748b" letter-spacing="2px" text-transform="uppercase" padding-top="10px">
                Réservation #{{ datas.contrat.numReservation }}
            </mj-text>

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

            <mj-text font-size="15px" color="#334155" line-height="1.5">
                Bonjour <strong>{{ datas.customer.surname }}</strong>,
                <br /><br />
                Nous vous informons que suite au retour de votre location et après expertise de notre équipe, nous avons procédé à l'**encaissement de votre caution**.
                <br /><br />
                Cette décision fait suite au constat suivant :
                <p style="background-color: #fff1f2; border-left: 4px solid #e11d48; padding: 15px; color: #9f1239; font-style: italic;">
                    {{ datas.reason|default('Non-respect des conditions générales de location ou dégradation du matériel constaté lors du retour.') }}
                </p>
            </mj-text>

            <mj-wrapper background-color="#f8fafc" border-radius="16px" padding="20px">
                <mj-section padding="0">
                    <mj-column width="50%">
                        <mj-text font-size="10px" font-weight="800" color="#94a3b8" text-transform="uppercase">Montant prélevé</mj-text>
                        <mj-text font-size="22px" font-weight="900" font-style="italic" color="#e11d48" padding-top="5px">
                            {{ datas.payment.amount|number_format(2, ',', ' ') }}€
                        </mj-text>
                    </mj-column>
                    <mj-column width="50%">
                        <mj-text font-size="10px" font-weight="800" color="#94a3b8" text-transform="uppercase" align="right">Date d'effet</mj-text>
                        <mj-text font-size="14px" font-weight="700" color="#475569" align="right" padding-top="10px">
                            {{ "now"|date('d/m/Y') }}
                        </mj-text>
                    </mj-column>
                </mj-section>
            </mj-wrapper>

            <mj-text font-size="13px" color="#64748b" padding-top="20px">
                Vous recevrez prochainement par email une facture détaillée justifiant les frais de remise en état ou les pénalités appliquées.
            </mj-text>

            <mj-button background-color="#e11d48" color="#ffffff" border-radius="12px" font-weight="800" text-transform="uppercase" font-size="12px" padding-top="30px" href="{{ datas.contactLink }}">
                Contacter le support
            </mj-button>

        </mj-column>
    </mj-section>
{% endblock %}
