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

{% block content %}
    <mj-section background-color="#ffffff" padding="40px 20px" border-radius="20px">
        <mj-column>
            <mj-text align="center" font-weight="900" font-size="10px" color="#3b82f6" letter-spacing="2px" text-transform="uppercase">
                Ludikevent • Location
            </mj-text>

            <mj-text align="center" font-weight="900" font-style="italic" font-size="28px" color="#1e293b" text-transform="uppercase" padding-top="10px">
                Votre <span style="color: #3b82f6;">Contrat</span> de location
            </mj-text>

            <mj-divider border-width="1px" border-color="#e2e8f0" width="100px" padding-top="20px" padding-bottom="20px" />

            <mj-text font-size="15px" color="#475569" line-height="1.6">
                Bonjour <strong>{{  datas.contrat.customer.surname }} {{  datas.contrat.customer.name }}</strong>,
            </mj-text>

            <mj-text font-size="15px" color="#475569" line-height="1.6">
                Vous trouverez ci-joint votre contrat pour votre événement à <strong>{{  datas.contrat.townEvent }}</strong>.
                <br/><br/>
                Pour confirmer votre réservation, merci de prendre connaissance du document et de le <strong>signer électroniquement</strong> en cliquant sur le bouton ci-dessous :
            </mj-text>

            <mj-section background-color="#f8fafc" border="1px solid #e2e8f0" border-radius="15px" padding="20px">
                <mj-column>
                    <mj-text font-size="12px" color="#64748b" padding="0">Référence Dossier</mj-text>
                    <mj-text font-size="16px" font-weight="bold" color="#1e293b" padding="5px 0 0 0">#{{  datas.contrat.numReservation }}</mj-text>
                </mj-column>
                <mj-column>
                    <mj-text font-size="12px" color="#64748b" padding="0">Lieu</mj-text>
                    <mj-text font-size="16px" font-weight="bold" color="#1e293b" padding="5px 0 0 0">{{ datas.contrat.townEvent }}</mj-text>
                </mj-column>
            </mj-section>

            <mj-button background-color="#3b82f6" color="#ffffff" font-size="13px" font-weight="900" text-transform="uppercase" border-radius="10px" href="{{  datas.contratLink }}" padding-top="35px" inner-padding="16px 35px">
                Accéder à la signature en ligne
            </mj-button>

            <mj-text align="center" font-size="11px" color="#94a3b8" padding-top="40px">
                Ce document est également disponible en pièce jointe de cet e-mail.
                <br/>
                Besoin d'aide ? Appelez-nous au <strong>06 14 17 24 47</strong>.
            </mj-text>
        </mj-column>
    </mj-section>
{% endblock %}
