{% extends 'base.html.twig' %}

{% block title %}Evenements - E-Ticket{% endblock %}
{% block description %}Decouvrez tous les evenements sur E-Ticket{% endblock %}

{% block body %}
<div class="bg-[#fbfbfb] overflow-x-hidden italic font-sans">

    <section class="relative flex items-center justify-center bg-white border-b-8 border-gray-900 px-4 pt-20 pb-16">
        <div class="absolute inset-0 opacity-[0.03] pointer-events-none select-none overflow-hidden">
            <span class="text-[8rem] md:text-[20rem] font-black uppercase leading-none block -rotate-12 translate-y-10">EVENTS</span>
        </div>

        <div class="max-w-7xl mx-auto relative z-10 text-center">
            <h1 class="text-5xl md:text-8xl font-black uppercase tracking-tighter leading-[0.85] mb-4">
                <span class="block">Nos evenements</span>
            </h1>
            <p class="max-w-2xl mx-auto text-xl font-bold text-gray-600 italic">
                Decouvrez les evenements proposes par nos organisateurs.
            </p>
        </div>
    </section>

    <section class="py-8 px-4">
        <div class="max-w-7xl mx-auto">
            <form method="get" action="{{ path('app_events') }}" class="flex flex-wrap gap-3 items-end">
                <div class="flex-1 min-w-[200px]">
                    <input type="text" name="q" value="{{ searchQuery }}" class="form-input" placeholder="Rechercher un evenement, une ville...">
                </div>
                <button type="submit" class="btn-brutal font-black uppercase text-xs tracking-widest hover:bg-indigo-600 hover:text-white transition-all">Rechercher</button>
                {% if searchQuery %}
                    <a href="{{ path('app_events') }}" class="px-4 py-3 border-3 border-gray-900 bg-white font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Effacer</a>
                {% endif %}
            </form>
        </div>
    </section>

    <section class="py-8 px-4 pb-16">
        <div class="max-w-7xl mx-auto">
            {% if events|length > 0 %}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                {% for event in events %}
                <a href="{{ path('app_event_detail', {orgaSlug: event.account.slug, id: event.id, eventSlug: event.slug}) }}" class="group bg-white border-4 border-gray-900 shadow-[6px_6px_0px_rgba(0,0,0,1)] hover:translate-y-[-4px] hover:shadow-[6px_10px_0px_rgba(0,0,0,1)] transition-all overflow-hidden block">
                    {% if event.eventMainPictureName %}
                        <img src="{{ ('/uploads/events/' ~ event.eventMainPictureName) | imagine_filter('medium') }}" alt="{{ event.title }}" class="w-full h-[180px] object-cover">
                    {% else %}
                        <div class="w-full h-[180px] bg-gray-100 flex items-center justify-center">
                            <span class="text-4xl opacity-20">&#128197;</span>
                        </div>
                    {% endif %}
                    <div class="p-6">
                        <h2 class="text-xl font-black uppercase tracking-tighter group-hover:text-indigo-600 transition-colors mb-2">{{ event.title }}</h2>
                        <p class="text-sm font-bold text-gray-500 mb-1">{{ event.startAt|date('d/m/Y') }} &bull; {{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p>
                        <p class="text-xs font-black uppercase tracking-widest text-gray-400">{{ event.zipcode }} {{ event.city }}</p>
                        <p class="text-xs font-bold text-gray-400 mt-2">{{ event.account.companyName ?? event.account.firstName ~ ' ' ~ event.account.lastName }}</p>
                    </div>
                </a>
                {% endfor %}
            </div>

            {% if events.getTotalItemCount > 12 %}
            <div class="mt-8">
                {{ knp_pagination_render(events) }}
            </div>
            {% endif %}

            {% else %}
            <div class="text-center py-16">
                <div class="border-4 border-gray-900 bg-white shadow-[6px_6px_0px_rgba(0,0,0,1)] p-12 max-w-lg mx-auto">
                    <p class="text-gray-400 font-black text-lg uppercase">
                        {% if searchQuery %}
                            Aucun evenement trouve pour "{{ searchQuery }}"
                        {% else %}
                            Aucun evenement pour le moment
                        {% endif %}
                    </p>
                </div>
            </div>
            {% endif %}
        </div>
    </section>

</div>
{% endblock %}