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

{% block subject %}
    Nouveaux événement : {{ datas.event.title }}
{% endblock %}

{% block content %}
    <mj-section background-color="#ffffff" padding-top="30px" padding-bottom="20px">
        <mj-column>
            <mj-text font-size="20px" color="#1F2937" font-weight="bold" line-height="28px">
                Découvrez notre nouvel événement !
            </mj-text>
            <mj-text font-size="16px" color="#4B5563" padding-top="10px">
                Nous sommes ravis de vous annoncer la création d'un nouvel événement. Voici les détails :
            </mj-text>
        </mj-column>
    </mj-section>

    {# Détails de l'événement #}
    <mj-section background-color="#F3F4F6" padding="20px">
        <mj-column>

            <mj-text font-size="14px" color="#6B7280" padding-bottom="5px">
                Titre de l'événement :
            </mj-text>
            <mj-text font-size="18px" color="#1F2937" font-weight="600" padding-bottom="15px">
                {{ datas.event.title }}
            </mj-text>

            <mj-divider border-color="#D1D5DB" border-width="1px" padding="0 0 15px 0" />

            {# Organisateur #}
            <mj-text font-size="14px" color="#6B7280" padding-bottom="5px">
                Organisateur :
            </mj-text>
            <mj-text font-size="16px" color="#1F2937" padding-bottom="15px">
                {{ datas.event.organizer }}
            </mj-text>

            {# Lieu #}
            <mj-text font-size="14px" color="#6B7280" padding-bottom="5px">
                Lieu :
            </mj-text>
            <mj-text font-size="16px" color="#1F2937" padding-bottom="15px">
                {{ datas.event.location }}
            </mj-text>

            {# Dates #}
            <mj-table padding-bottom="15px">
                <tr>
                    <td style="width: 50%; padding-right: 10px;">
                        <span style="font-size: 14px; color: #6B7280;">Début :</span><br />
                        <span style="font-size: 16px; color: #1F2937;">{{ datas.event.startAt|date('d/m/Y') }}</span>
                    </td>
                    <td style="width: 50%; padding-left: 10px;">
                        <span style="font-size: 14px; color: #6B7280;">Fin :</span><br />
                        <span style="font-size: 16px; color: #1F2937;">{{ datas.event.endAt|date('d/m/Y') }}</span>
                    </td>
                </tr>
            </mj-table>

            <mj-divider border-color="#D1D5DB" border-width="1px" padding="10px 0 20px 0" />

            {# Appel à l'action (CTA) vers l'URL publique #}
            <mj-button background-color="#4F46E5" color="#ffffff" border-radius="8px"
                       href="{{ datas.url }}"
                       padding="10px 25px" font-size="16px">
                Voir les détails de l'événement
            </mj-button>

        </mj-column>


    </mj-section>
{% endblock %}
