e-cosplay/templates/event_view.twig

{% extends 'base.twig' %}

{% block title %}{{ event.title }}{% endblock %}
{% block meta_description %}{{ event.title }}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_event_details',{id:event.id}) }}" />{% endblock %}
{% block breadcrumb_schema %}
    <script type="application/ld+json">
        {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
        {
        "@type": "ListItem",
        "position": 1,
        "name": "{{ 'breadcrumb.home'|trans }}",
"item": "{{ app.request.schemeAndHttpHost }}"
},
{
"@type": "ListItem",
"position": 2,
"name": "{{ 'breadcrumb.events'|trans }}",
"item": "{{ url('app_events') }}"
},
{
"@type": "ListItem",
"position": 3,
"name": "{{ event.title }}",
"item": "{{ app.request.schemeAndHttpHost }}{{ path('app_event_details',{id:event.id}) }}"
}
]
}
    </script>
{% endblock %}

{% block body %}
    <div class="container mx-auto p-4 md:p-8 pt-12">
        <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden">

            {% set imageUrl = event.eventsFileName ? vich_uploader_asset(event, 'affiche') : null %}

            {# Image / Affiche de l'événement #}
            {% if imageUrl %}
                <div class="h-64 sm:h-96 w-full overflow-hidden">
                    <img src="{{ asset(imageUrl) }}"
                         alt="Affiche de l'événement {{ event.title }}"
                         class="w-full h-full object-cover">
                </div>
            {% endif %}

            <div class="p-6 sm:p-10">

                {# Titre principal #}
                <h1 class="text-4xl font-extrabold text-gray-900 mb-6 border-b pb-4">
                    {{ event.title }}
                </h1>

                {# Détails clés (Date, Lieu, Organisateur) #}
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 border-b pb-6">

                    {# Date Block #}
                    <div class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
                        <div>
                            <p class="text-sm font-semibold text-indigo-600">{{ 'events.details.date'|trans|default('Date') }}</p>
                            <p class="text-lg font-medium text-gray-800">
                                {{ event.startAt|date('d/m/Y') }}
                                {% if event.startAt|date('Ymd') != event.endAt|date('Ymd') %}
                                    - {{ event.endAt|date('d/m/Y') }}
                                {% else %}
                                    - {{ event.endAt|date('H:i') }}
                                {% endif %}
                            </p>
                        </div>
                    </div>

                    {# Location Block #}
                    <div class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        <div>
                            <p class="text-sm font-semibold text-indigo-600">{{ 'events.details.location'|trans|default('Lieu') }}</p>
                            <p class="text-lg font-medium text-gray-800">{{ event.location }}</p>
                        </div>
                    </div>

                    {# Organizer Block #}
                    <div class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                        <div>
                            <p class="text-sm font-semibold text-indigo-600">{{ 'events.details.organizer'|trans|default('Organisateur') }}</p>
                            <p class="text-lg font-medium text-gray-800">{{ event.organizer }}</p>
                        </div>
                    </div>
                </div>

                {# Description #}
                {% if event.description is defined and event.description is not empty %}
                    <h2 class="text-2xl font-bold text-gray-800 mb-4">
                        {{ 'events.details.description_title'|trans|default('Description') }}
                    </h2>
                    <div class="prose max-w-none text-gray-600 leading-relaxed mb-10">
                        {{ event.description|raw }} {# Assuming description is HTML/Markdown content #}
                    </div>
                {% endif %}

                {# Bouton de retour #}
                <a href="{{ url('app_events') }}" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 transition duration-150 font-medium mt-4">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                    {{ 'events.details.back_to_list'|trans|default('Retour à la liste des événements') }}
                </a>
            </div>
        </div>
    </div>


{% endblock %}