templates/events/event_show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ event.title }} - WA BENIN{% endblock %}
  5. {% block body %}
  6. <div class="page-header" style="height: 35vh; min-height: 250px; margin-bottom: 40px;">
  7. <div class="container fade-up" style="max-width: 800px; text-align: center;">
  8. <span style="background: var(--red); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; display: inline-block;">{{ event.category }}</span>
  9. <h1 class="page-title" style="font-size: 3rem;">{{ event.title }}</h1>
  10. </div>
  11. </div>
  13. <section class="section-padding" style="padding-top: 0;">
  14. <div class="container">
  15. <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 40px;">
  17. <div class="fade-up" style="background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); overflow: hidden;">
  18. {% if event.image %}
  19. <div style="width: 100%; max-height: 450px; overflow: hidden;">
  20. <img src="{{ event.image }}" alt="{{ event.title }}" style="width: 100%; height: auto; object-fit: cover;">
  21. </div>
  22. {% endif %}
  23. <div style="padding: 40px;">
  24. <h2 style="margin-bottom: 20px;">À propos de l'événement</h2>
  25. <div style="font-size: 1.1rem; line-height: 1.8; color: #444;">
  26. {{ event.description|nl2br }}
  27. </div>
  28. </div>
  29. </div>
  31. <div class="fade-up" style="display: flex; flex-direction: column; gap: 20px;">
  32. <div style="background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow-soft);">
  33. <h3 style="margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px;">Détails</h3>
  35. <div style="margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px;">
  36. <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(244, 180, 0, 0.1); color: var(--gold); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
  37. <i class="far fa-calendar-alt"></i>
  38. </div>
  39. <div>
  40. <h4 style="margin: 0; font-size: 1rem;">Date & Heure</h4>
  41. <span style="color: #666; font-size: 0.9rem;">{{ event.date|date('d M Y à H:i') }}</span>
  42. </div>
  43. </div>
  45. <div style="margin-bottom: 15px; display: flex; align-items: flex-start; gap: 15px;">
  46. <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(30, 132, 73, 0.1); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
  47. <i class="fas fa-map-marker-alt"></i>
  48. </div>
  49. <div>
  50. <h4 style="margin: 0; font-size: 1rem;">Lieu</h4>
  51. <span style="color: #666; font-size: 0.9rem;">{{ event.location }}</span>
  52. </div>
  53. </div>
  55. <div style="margin-bottom: 25px; display: flex; align-items: flex-start; gap: 15px;">
  56. <div style="width: 40px; height: 40px; border-radius: 50%; background: rgba(192, 57, 43, 0.1); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
  57. <i class="fas fa-ticket-alt"></i>
  58. </div>
  59. <div>
  60. <h4 style="margin: 0; font-size: 1rem;">Tarif</h4>
  61. <span style="color: #666; font-size: 0.9rem; font-weight: bold;">
  62. {% if event.isFree %} Gratuit {% else %} {{ event.price }} € {% endif %}
  63. </span>
  64. </div>
  65. </div>
  67. <button class="btn btn-primary" style="width: 100%;">Réserver ma place</button>
  68. </div>
  70. <!-- Map -->
  71. <div style="width: 100%; height: 300px; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft);">
  72. <iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://maps.google.com/maps?q={{ event.location|url_encode }}&t=&z=13&ie=UTF8&iwloc=&output=embed" allowfullscreen></iframe>
  73. </div>
  74. </div>
  76. </div>
  77. </div>
  78. </section>
  79. {% endblock %}