{% 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">
                Nouveau <span style="color:#2563eb">Message</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">
                Expéditeur
            </mj-text>
            <mj-text font-size="18px" font-weight="700" color="#1e293b" padding-top="5px">
                {{ datas.surname }} {{ datas.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.phone }} <br/>
                <b>Email :</b> <span style="color:#2563eb; font-weight:700;">{{ datas.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">
                Contenu du message
            </mj-text>
        </mj-column>

        <mj-column width="100%" background-color="#f8fafc" border-radius="20px">
            <mj-text font-style="italic" color="#334155" line-height="1.6" padding="20px">
                "{{ datas.message|nl2br }}"
            </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.email }}">
                Répondre au client ⚡
            </mj-button>
        </mj-column>
    </mj-section>
{% endblock %}
