{% extends 'mails/base.twig' %}
{% block content %}
    <mj-section background-color="#ffffff" padding-bottom="0px">
        <mj-column width="100%">
            <mj-text font-size="22px" font-weight="900" color="#0f172a" text-transform="uppercase" font-style="italic" align="center">
                Nouvelle <span style="color:#2563eb">Demande de Réservation</span>
            </mj-text>
            <mj-divider border-width="1px" border-color="#f1f5f9" padding-top="20px" padding-bottom="20px" />
        </mj-column>
    </mj-section>

    <mj-section background-color="#ffffff" padding-top="0px">
        <mj-column width="100%">
            <mj-text padding-bottom="0px" font-size="10px" font-weight="900" color="#94a3b8" text-transform="uppercase" letter-spacing="1px">
                Client
            </mj-text>
            <mj-text font-size="18px" font-weight="700" color="#1e293b" padding-top="5px">
                {{ datas.session.customer.surname }} {{ datas.session.customer.name|upper }}
            </mj-text>

            <mj-text padding-top="15px" padding-bottom="0px" font-size="10px" font-weight="900" color="#94a3b8" text-transform="uppercase" letter-spacing="1px">
                Coordonnées
            </mj-text>
            <mj-text font-size="15px" color="#0f172a" padding-top="5px">
                <b>Tél :</b> {{ datas.session.customer.phone }} <br/>
                <b>Email :</b> <span style="color:#2563eb; font-weight:700;">{{ datas.session.customer.email }}</span>
            </mj-text>

            <mj-text padding-top="25px" padding-bottom="0px" font-size="10px" font-weight="900" color="#94a3b8" text-transform="uppercase" letter-spacing="1px">
                Détails Événement
            </mj-text>
            <mj-text font-size="15px" color="#0f172a" padding-top="5px">
                <b>Type :</b> {{ datas.session.type }} <br/>
                <b>Lieu :</b> {{ datas.session.adressEvent }} {{ datas.session.zipCodeEvent }} {{ datas.session.townEvent }}
            </mj-text>

             <mj-text padding-top="25px" padding-bottom="0px" font-size="10px" font-weight="900" color="#94a3b8" text-transform="uppercase" letter-spacing="1px">
                Lien vers la session
            </mj-text>
             <mj-text font-size="15px" color="#0f172a" padding-top="5px">
                {{ system.path }}/flow/{{ datas.session.uuid }}/confirmed
            </mj-text>
        </mj-column>

        <mj-column width="100%">
            <mj-button background-color="#2563eb" color="#ffffff" font-size="14px" font-weight="900" text-transform="uppercase" border-radius="16px" padding-top="30px" inner-padding="18px 30px" href="mailto:{{ datas.session.customer.email }}">
                Répondre au client ⚡
            </mj-button>
        </mj-column>
    </mj-section>
{% endblock %}