{% extends 'base.twig' %}

{% block title %}{{ 'events.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'events.description'|trans }}{% endblock %}

{% block canonical_url %}<link rel="canonical" href="{{ url('app_events') }}" />{% 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": "{{ app.request.schemeAndHttpHost }}{{ app.request.pathInfo }}"
            }
          ]
        }
    </script>
{% endblock %}

{% block body %}
    <div class="bg-[#fbfbfb] min-h-screen font-sans text-gray-900 overflow-x-hidden">

        {# --- HEADER HERO --- #}
        <header class="relative pt-16 pb-20 px-4 border-b-4 border-gray-900 bg-white">
            <div class="max-w-7xl mx-auto relative z-10">
                <h1 class="text-6xl md:text-8xl font-black italic uppercase tracking-tighter leading-none">
                    {{ 'events.list_main_title'|trans|default('Upcoming Events') }}
                </h1>
                <div class="h-3 w-48 bg-yellow-500 skew-x-[-20deg] mt-6 shadow-[4px_4px_0px_rgba(0,0,0,1)]"></div>
            </div>
            {# Filigrane de fond style Esport #}
            <div class="absolute top-0 right-0 opacity-[0.03] pointer-events-none select-none hidden lg:block">
                <span class="text-[20rem] font-black italic uppercase leading-none">AGENDA</span>
            </div>
        </header>

        <div class="container mx-auto px-4 py-16">

            {% if events is defined and events is not empty %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 max-w-7xl mx-auto">
                    {% for event in events %}
                        {# CARTE ÉVÉNEMENT NEUBRUTALISTE #}
                        <div class="group relative bg-white border-4 border-gray-900 shadow-[12px_12px_0px_rgba(0,0,0,1)] hover:shadow-[16px_16px_0px_#4f46e5] hover:-translate-y-2 transition-all duration-300 flex flex-col overflow-hidden italic">

                            {# Badge de Date flottant (Style Esport) #}
                            <div class="absolute top-4 left-4 z-20 bg-indigo-600 text-white px-4 py-1 font-black uppercase text-sm skew-x-[-15deg] shadow-lg border-2 border-gray-900">
                                {{ event.startAt|date('d/m') }}
                            </div>

                            {# Image / Affiche #}
                            <div class="relative h-64 bg-gray-200 overflow-hidden border-b-4 border-gray-900">
                                {% set imageUrl = event.eventsFileName ? vich_uploader_asset(event, 'affiche') : null %}
                                {% if imageUrl %}
                                    <img src="{{ asset(imageUrl) | imagine_filter('webp') }}"
                                         alt="{{ event.title }}"
                                         class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700 grayscale group-hover:grayscale-0">
                                {% else %}
                                    <div class="w-full h-full flex items-center justify-center bg-gray-900 text-gray-700">
                                        <span class="text-6xl font-black opacity-20 uppercase tracking-tighter">NO_IMAGE</span>
                                    </div>
                                {% endif %}
                                {# Overlay dégradé #}
                                <div class="absolute inset-0 bg-gradient-to-t from-gray-900/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                            </div>

                            {# Contenu #}
                            <div class="p-6 flex flex-col flex-grow">
                                <h2 class="text-3xl font-black uppercase tracking-tighter text-gray-900 mb-4 group-hover:text-indigo-600 transition-colors">
                                    {{ event.title }}
                                </h2>

                                <div class="space-y-4 mb-8">
                                    {# Date Detail #}
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-yellow-400 border-2 border-gray-900 flex items-center justify-center rotate-45">
                                            <i class="fas fa-calendar-alt -rotate-45 text-xs"></i>
                                        </div>
                                        <div class="text-sm font-bold uppercase tracking-tight">
                                            {{ event.startAt|date('d/m/Y H:i') }}
                                            <span class="text-indigo-600">>></span>
                                            {{ event.endAt|date('H:i') }}
                                        </div>
                                    </div>

                                    {# Location Detail #}
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-white border-2 border-gray-900 flex items-center justify-center rotate-45 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                                            <i class="fas fa-map-marker-alt -rotate-45 text-xs"></i>
                                        </div>
                                        <div class="text-sm font-bold uppercase tracking-tight text-gray-600">
                                            {{ event.location }}
                                        </div>
                                    </div>

                                    {# Organizer Detail #}
                                    <div class="flex items-center gap-3">
                                        <div class="w-8 h-8 bg-white border-2 border-gray-900 flex items-center justify-center rotate-45 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                                            <i class="fas fa-user-shield -rotate-45 text-xs"></i>
                                        </div>
                                        <div class="text-[10px] font-black uppercase text-gray-400 tracking-widest">
                                            {{ 'events.list.organizer_label'|trans }}: {{ event.organizer }}
                                        </div>
                                    </div>
                                </div>

                                {# Bouton Détails (Style Bouton Combat) #}
                                <a href="{{ url('app_event_details', {id: event.id|default(loop.index)}) }}"
                                   class="mt-auto relative group/btn overflow-hidden border-4 border-gray-900 bg-white py-3 px-6 text-center transition-all hover:bg-gray-900">
                                <span class="relative z-10 font-black uppercase italic tracking-widest text-sm group-hover/btn:text-white">
                                    {{ 'events.list.details_button'|trans|default('View Details') }} <span class="ml-2">→</span>
                                </span>
                                </a>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                {# --- ÉTAT VIDE (NO EVENTS) --- #}
                <div class="max-w-4xl mx-auto text-center py-24 px-8 border-8 border-dashed border-gray-200 bg-white relative">
                    <div class="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-900 text-white p-6 rotate-12 shadow-2xl">
                        <svg class="w-16 h-16 text-yellow-500" 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>

                    <h2 class="text-5xl font-black uppercase italic tracking-tighter text-gray-900 mt-8 mb-4">
                        {{ 'events.no_events_title'|trans|default('No Upcoming Events') }}
                    </h2>
                    <p class="text-xl font-bold text-gray-500 italic mb-12">
                        {{ 'events.no_events_message'|trans|default('It looks like we don\'t have any events scheduled right now.') }}
                    </p>

                    <a href="{{ url('app_contact') }}" class="inline-block relative group">
                        <div class="absolute inset-0 bg-gray-900 translate-x-2 translate-y-2 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform"></div>
                        <div class="relative bg-indigo-600 text-white px-12 py-5 font-black uppercase italic tracking-tighter border-2 border-gray-900">
                            {{ 'events.button_contact'|trans|default('Contact Us') }}
                        </div>
                    </a>
                </div>
            {% endif %}

        </div>

        {# --- BANDEAU TECHNIQUE BAS DE PAGE --- #}
        <div class="mt-20 bg-gray-900 py-6 overflow-hidden">
            <div class="whitespace-nowrap flex animate-marquee italic">
                {% for i in 1..10 %}
                    <span class="text-white font-black uppercase mx-8 text-xl opacity-20 tracking-widest">
                    {{ 'event_roll'|trans }}
                </span>
                {% endfor %}
            </div>
        </div>

    </div>

    <style>
        /* Animation du texte qui défile en bas */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: 200%;
            animation: marquee 30s linear infinite;
        }
    </style>

{% endblock %}