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="bg-[#fbfbfb] min-h-screen py-12 px-4 italic">
        <div class="max-w-5xl mx-auto">

            {# BOUTON RETOUR STYLE BRUTALISTE #}
            <a href="{{ url('app_events') }}" class="inline-block mb-8 px-6 py-2 bg-white border-4 border-gray-900 font-black uppercase tracking-widest text-xs shadow-[4px_4px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                <i class="fas fa-arrow-left mr-2"></i> {{ 'events.details.back_to_list'|trans|default('Retour à la liste') }}
            </a>

            <article class="bg-white border-8 border-gray-900 shadow-[16px_16px_0px_#4f46e5]">

                {# HEADER AVEC IMAGE / AFFICHE #}
                <div class="grid grid-cols-1 md:grid-cols-12 border-b-8 border-gray-900">

                    {# Affiche #}
                    <div class="md:col-span-5 bg-gray-200 border-b-8 md:border-b-0 md:border-r-8 border-gray-900 min-h-[400px]">
                        {% set imageUrl = event.eventsFileName ? vich_uploader_asset(event, 'affiche') : null %}
                        {% if imageUrl %}
                            <img src="{{ asset(imageUrl) }}"
                                 alt="{{ event.title }}"
                                 class="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-500">
                        {% else %}
                            <div class="w-full h-full flex items-center justify-center bg-gray-100 font-black text-gray-400 uppercase text-2xl p-10 text-center">
                                Affiche non disponible
                            </div>
                        {% endif %}
                    </div>

                    {# Titre et Infos Rapides #}
                    <div class="md:col-span-7 p-8 md:p-12 flex flex-col justify-center bg-white">
                        <div class="inline-block bg-yellow-400 text-gray-900 px-4 py-1 mb-6 border-4 border-gray-900 font-black uppercase tracking-widest text-sm skew-x-[-10deg] self-start">
                            Mission Log // ID: {{ event.id }}
                        </div>

                        <h1 class="text-5xl md:text-7xl font-black uppercase tracking-tighter leading-none mb-8">
                            {{ event.title }}
                        </h1>

                        <div class="space-y-4">
                            <div class="flex items-center gap-4">
                            <span class="w-10 h-10 bg-indigo-600 text-white flex items-center justify-center border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">
                                <i class="fas fa-calendar-alt"></i>
                            </span>
                                <span class="text-xl font-black uppercase">
                                {{ event.startAt|date('d/m/Y') }}
                                    {% if event.startAt|date('Ymd') != event.endAt|date('Ymd') %}
                                        - {{ event.endAt|date('d/m/Y') }}
                                    {% else %}
                                        <span class="text-indigo-600 ml-2">//</span> {{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}
                                    {% endif %}
                            </span>
                            </div>

                            <div class="flex items-center gap-4">
                            <span class="w-10 h-10 bg-pink-500 text-white flex items-center justify-center border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">
                                <i class="fas fa-map-marker-alt"></i>
                            </span>
                                <span class="text-xl font-black uppercase">{{ event.location }}</span>
                            </div>

                            <div class="flex items-center gap-4">
                            <span class="w-10 h-10 bg-yellow-400 text-gray-900 flex items-center justify-center border-2 border-gray-900 shadow-[2px_2px_0px_rgba(0,0,0,1)]">
                                <i class="fas fa-user-shield"></i>
                            </span>
                                <span class="text-lg font-bold uppercase opacity-70">{{ 'events.details.organizer'|trans|default('Organisé par') }} : {{ event.organizer }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {# CORPS DE LA DESCRIPTION #}
                <div class="p-8 md:p-12 bg-gray-50">
                    <div class="max-w-3xl">
                        <h2 class="text-3xl font-black uppercase tracking-widest mb-8 border-l-8 border-indigo-600 pl-6">
                            {{ 'events.details.description_title'|trans|default('Briefing de mission') }}
                        </h2>

                        {% if event.description is defined and event.description is not empty %}
                            <div class="prose prose-xl max-w-none text-gray-800 font-bold leading-relaxed italic">
                                {{ event.description|raw }}
                            </div>
                        {% else %}
                            <p class="text-gray-400 font-black uppercase italic">Aucune information supplémentaire fournie.</p>
                        {% endif %}
                    </div>
                </div>

                {# BANDEAU INFÉRIEUR (CTA / PARTAGE) #}
                <div class="border-t-8 border-gray-900 p-8 flex flex-col md:flex-row items-center justify-between gap-8 bg-white">
                    <div class="text-center md:text-left">
                        <p class="font-black uppercase tracking-tighter text-2xl">Prêt à rejoindre l'aventure ?</p>
                        <p class="font-bold text-gray-500 italic uppercase">Préparez vos crafts et vos équipements.</p>
                    </div>

                    <div class="flex gap-4">
                        <button onclick="window.print()" class="px-8 py-4 bg-gray-900 text-white font-black uppercase italic border-4 border-gray-900 shadow-[6px_6px_0px_#4f46e5] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
                            Imprimer le pass
                        </button>
                    </div>
                </div>
            </article>
        </div>
    </div>
{% endblock %}