{% 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 de succès / déverrouillage #}
            <mj-image src="https://cdn-icons-png.flaticon.com/512/7124/7124533.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="#16a34a">Libéré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 />
                Bonne nouvelle ! Suite à la vérification du matériel de votre réservation, nous vous confirmons que votre <strong>caution a été intégralement libérée</strong>.
                <br /><br />
                L'empreinte bancaire qui avait été effectuée est désormais annulée. Votre plafond bancaire sera mis à jour automatiquement par votre établissement bancaire sous un délai habituel de 24h à 48h.
            </mj-text>

            <mj-wrapper background-color="#f0fdf4" border-radius="16px" padding="20px">
                <mj-section padding="0">
                    <mj-column width="50%">
                        <mj-text font-size="10px" font-weight="800" color="#16a34a" text-transform="uppercase">Statut final</mj-text>
                        <mj-text font-size="20px" font-weight="900" font-style="italic" color="#16a34a" padding-top="5px">
                            ANNULÉE
                        </mj-text>
                    </mj-column>
                    <mj-column width="50%">
                        <mj-text font-size="10px" font-weight="800" color="#94a3b8" text-transform="uppercase" align="right">Montant libéré</mj-text>
                        <mj-text font-size="20px" font-weight="900" color="#475569" align="right" padding-top="5px">
                            {{ datas.payment.amount|number_format(2, ',', ' ') }}€
                        </mj-text>
                    </mj-column>
                </mj-section>
            </mj-wrapper>

            <mj-text font-size="12px" color="#94a3b8" align="center" padding-top="20px" line-height="1.4">
                <em>Note : Puisqu'il s'agissait d'une pré-autorisation, aucune transaction de "remboursement" n'apparaîtra sur votre relevé, la ligne de débit initial disparaîtra simplement ou passera en statut annulé.</em>
            </mj-text>

            <mj-button background-color="#0f172a" color="#ffffff" border-radius="12px" font-weight="800" text-transform="uppercase" font-size="12px" padding-top="30px" href="{{ datas.reservationLink }}">
                Voir ma réservation
            </mj-button>

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