templates/events/evenements.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Événements - WA BENIN{% endblock %}
  5. {% block body %}
  6. <div class="page-header" style="height: 40vh; min-height: 300px; background-image: linear-gradient(rgba(31, 31, 31, 0.8), rgba(31, 31, 31, 0.8)), url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); margin-bottom: 40px;">
  7. <div class="container fade-up">
  8. <h1 class="page-title">Nos Événements</h1>
  9. <p style="font-size: 1.2rem; color: var(--gold); max-width: 600px; margin: 0 auto;">Festivals, conférences, expositions... Découvrez l'agenda culturel de WA BENIN.</p>
  10. </div>
  11. </div>
  13. <section class="section-padding" style="padding-top: 0;">
  14. <div class="container">
  15. <!-- Filters -->
  16. <form method="GET" action="{{ path('app_evenements') }}" style="background: #fff; padding: 20px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); margin-bottom: 40px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;">
  17. <div style="display: flex; gap: 15px; align-items: center;">
  18. <select name="category" onchange="this.form.submit()" style="padding: 10px 15px; border: 1px solid #ddd; border-radius: 8px; outline: none; background: #f9f9f9; font-family: var(--font-body);">
  19. <option value="">Toutes les catégories</option>
  20. {% for cat in categories %}
  21. <option value="{{ cat }}" {% if current_category == cat %}selected{% endif %}>{{ cat }}</option>
  22. {% endfor %}
  23. </select>
  24. </div>
  25. <div style="position: relative; display: flex;">
  26. <input type="text" name="search" value="{{ search_query }}" placeholder="Rechercher un événement..." style="padding: 10px 15px; padding-right: 40px; border: 1px solid #ddd; border-radius: 8px 0 0 8px; outline: none; width: 250px; font-family: var(--font-body);">
  27. <button type="submit" style="background: var(--gold); color: #fff; border: none; padding: 0 15px; border-radius: 0 8px 8px 0; cursor: pointer;">
  28. <i class="fas fa-search"></i>
  29. </button>
  30. </div>
  31. </form>
  33. <!-- List View -->
  34. <div style="display: flex; flex-direction: column; gap: 30px;">
  35. {% for event in events %}
  36. <!-- Event Row -->
  37. <div class="fade-up" style="background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; transition: var(--transition);">
  38. <div style="width: 350px; flex-shrink: 0; position: relative;">
  39. <img src="{{ event.image }}" alt="{{ event.title }}" style="width: 100%; height: 100%; object-fit: cover;">
  40. <div style="position: absolute; top: 20px; left: 20px; background: var(--white-off); padding: 10px 15px; border-radius: 8px; text-align: center; font-family: var(--font-heading); font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
  41. <span style="display: block; color: var(--red); font-size: 1.5rem; line-height: 1;">{{ event.date|date('d') }}</span>
  42. <small style="font-size: 0.8rem; color: var(--black-soft);">{{ event.date|date('M') }}</small>
  43. </div>
  44. </div>
  45. <div style="padding: 30px; display: flex; flex-direction: column; justify-content: center; flex: 1;">
  46. <span style="color: var(--green); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; margin-bottom: 10px; display: inline-block;">{{ event.category }}</span>
  47. <h3 style="font-size: 1.8rem; margin-bottom: 15px;">{{ event.title }}</h3>
  48. <div style="display: flex; gap: 20px; color: #666; font-size: 0.95rem; margin-bottom: 20px;">
  49. <span><i class="fas fa-map-marker-alt" style="color: var(--gold);"></i> {{ event.location }}</span>
  50. <span><i class="far fa-clock" style="color: var(--gold);"></i> {{ event.date|date('H:i') }}</span>
  51. <span><i class="fas fa-ticket-alt" style="color: var(--gold);"></i> {% if event.isFree %} Gratuit {% else %} {{ event.price }} € {% endif %}</span>
  52. </div>
  53. <p style="color: #555; margin-bottom: 25px;">{{ event.description|slice(0, 150) ~ '...' }}</p>
  54. <div style="display: flex; gap: 15px;">
  55. <a href="#" class="btn btn-primary">Réserver ma place</a>
  56. <a href="{{ path('app_event_show', {id: event.id}) }}" class="btn btn-outline">En savoir plus</a>
  57. </div>
  58. </div>
  59. </div>
  60. {% else %}
  61. <p style="text-align: center;">Aucun événement programmé pour le moment.</p>
  62. {% endfor %}
  63. </div>
  65. {% if total_pages > 1 %}
  66. <div style="margin-top: 50px; display: flex; justify-content: center; gap: 10px;">
  67. {% for i in 1..total_pages %}
  68. <a href="{{ path('app_evenements', {page: i, category: current_category, search: search_query}) }}" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; {% if current_page == i %}background: var(--gold); color: #fff; border: none;{% else %}background: #fff; border: 1px solid #ddd; color: var(--black-dark);{% endif %} border-radius: 8px; font-weight: bold;">
  69. {{ i }}
  70. </a>
  71. {% endfor %}
  72. </div>
  73. {% endif %}
  74. </div>
  75. </section>
  77. <style>
  78. @media (max-width: 768px) {
  79. .fade-up { flex-direction: column !important; }
  80. .fade-up > div:first-child { width: 100% !important; height: 250px; }
  81. }
  82. </style>
  83. {% endblock %}