85 lines
4.5 KiB
Twig
85 lines
4.5 KiB
Twig
{% 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">📅</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') }} • {{ 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 %}
|