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

{% block content %}
    <mj-section background-color="#ffffff" padding="20px 0">
        <mj-column>
            <mj-text font-size="24px" font-weight="700" color="#1E3A8A" align="center" padding-bottom="10px">
                Nouveau Message de Contact
            </mj-text>
            <mj-text font-size="16px" color="#4B5563" align="center" padding-bottom="30px">
                Vous avez reçu un nouveau message via le formulaire de contact du site.
            </mj-text>
        </mj-column>
    </mj-section>

    {# Section des informations personnelles (Tout sur une seule ligne) #}
    <mj-section background-color="#F3F4F6" padding="20px 20px" border-radius="8px">
        <mj-column width="100%">
            <mj-text font-size="18px" font-weight="600" color="#10B981" padding-bottom="15px">
                Détails de l'Expéditeur
            </mj-text>

            {# Bloc de texte ultra-condensé #}
            <mj-text font-size="14px" color="#1F2937" line-height="24px">
                <strong style="font-weight: 500; color: #374151;">Expéditeur:</strong> {{ datas.dto.surname }} {{ datas.dto.name }} |
                <strong style="font-weight: 500; color: #374151;">E-mail:</strong> <a href="mailto:{{ datas.dto.email }}" style="color:#4C51BF; text-decoration:none;">{{ datas.dto.email }}</a>
                {% if datas.dto.tel is not empty %} |
                    <strong style="font-weight: 500; color: #374151;">Tél:</strong> <a href="tel:{{ datas.dto.tel }}" style="color:#4C51BF; text-decoration:none;">{{ datas.dto.tel }}</a>
                {% endif %}
            </mj-text>

        </mj-column>
    </mj-section>

    {# Section du message #}
    <mj-section background-color="#ffffff" padding="30px 20px 20px 20px">
        <mj-column width="100%">
            {# Objet #}
            <mj-text font-size="18px" font-weight="600" color="#1E3A8A" padding-bottom="10px" border-bottom="1px solid #D1D5DB">
                Objet: {{ datas.dto.subject }}
            </mj-text>

            {# En-tête du contenu #}
            <mj-text font-size="16px" font-weight="600" color="#1F2937" padding-top="20px" padding-bottom="10px">
                Contenu du Message:
            </mj-text>

            {# Contenu du message (avec gestion des sauts de ligne) #}
            <mj-text font-size="14px" color="#374151" line-height="24px" background-color="#F9FAFB" padding="15px" border-radius="4px">
                {{ datas.dto.message | raw | nl2br }}
            </mj-text>

            {# Bouton d'action pour répondre #}
            <mj-button href="mailto:{{ datas.dto.email }}" background-color="#4C51BF" color="#ffffff" font-size="14px" padding-top="30px" border-radius="6px">
                Répondre à l'Expéditeur
            </mj-button>
        </mj-column>
    </mj-section>
{% endblock %}
