templates/evenement/single_evenement.html.twig line 1

  1. {% if ((event.isVisible or is_granted('ROLE_SULU_CHEF')) and (event.startDate> date('now', 'Europe/Paris', 'Y-m-d'))) %}
  2.     <div class="col-span-1 p-6 w-full h-full flex items-stretch justify-between space-x-6 rounded-lg bg-white shadow-indigo-50 shadow-md">
  3.         <div class="w-full flex flex-col justify-between">
  4.             <div class="flex flex-col">
  5.                 <div class="flex mb-4 items-start">
  6.                     <a class="text-gray-900 text-2xl font-bold" href="{{ path('app_evenement', { id: event.id, eventTitle: event.title }) }}">
  7.                         {{ event.title }}
  8.                     </a>
  9.                     <div class="flex justify-center items-center m-1 ml-4 font-medium py-1 px-2 rounded-full text-blue-700 bg-blue-100 border border-blue-300">
  10.                         {% if event.maxAge < 99 %}
  11.                             <div class="text-s font-normal leading-none max-w-full flex-initial">{{ event.minAge }}&nbsp;-&nbsp;{{
  12.                                 event.maxAge
  13.                             }}&nbsp;ans</div>
  14.                         {% else %}
  15.                             <div class="text-s font-normal leading-none max-w-full flex-initial">Dès&nbsp;{{
  16.                                 event.minAge
  17.                             }}&nbsp;ans</div>
  18.                         {% endif %}
  19.                     </div>
  20.                 </div>
  21.                 <div class="flex items-center">
  22.                     <div class="pr-2">
  23.                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  24.                             <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"/>
  25.                         </svg>
  26.                     </div>
  27.                     <div class="block">
  28.                         {% if event.startDate != event.endDate %}
  29.                             <div>
  30.                                 <span class="font-bold">{{ event.startDate|format_date('full', locale = 'fr_CH') }}</span>
  31.                                 au
  32.                             </div>
  33.                             <div>
  34.                                 <div class="font-bold">{{ event.endDate|format_date('full', locale = 'fr_CH') }}</div>
  35.                             </div>
  36.                         {% else %}
  37.                             <div>
  38.                                 <span class="font-bold">{{ event.startDate|format_date('full', locale = 'fr_CH') }}</span>
  39.                             </div>
  40.                         {% endif %}
  41.                     </div>
  42.                 </div>
  44.                 {#% if event.organisators_display %}
  45.                     <div class="flex items-center mt-2 text-emerald-800">
  46.                         <div class="pr-2">
  47.                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  48.                                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
  49.                             </svg>
  50.                         </div>
  51.                         <div>{{ event.organisators_display }}</div>
  52.                     </div>
  53.                 {% endif %#}
  55.                 {% if event.contactEmail %}
  56.                     <div class="flex items-center mt-2 text-indigo-500">
  57.                         <div class="pr-2">
  58.                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  59.                                 <path stroke-linecap="round" d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25"/>
  60.                             </svg>
  61.                         </div>
  62.                         <div>
  63.                             <a href="mailto:{{ event.contactEmail }}">{{ event.contactEmail }}</a>
  64.                         </div>
  65.                     </div>
  66.                 {% endif %}
  68.                 {% if event.location %}
  69.                     <div class="flex items-center mt-2 text-amber-800">
  70.                         <div class="pr-2">
  71.                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  72.                                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
  73.                                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
  74.                             </svg>
  75.                         </div>
  76.                         <div>{{ event.location }}</div>
  77.                     </div>
  78.                 {% endif %}
  80.                 {% if event.price > 0 %}
  81.                     <div class="flex items-center text-green-500 mt-2">
  82.                         <div class="pr-2">
  83.                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  84.                                 <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"/>
  85.                             </svg>
  86.                         </div>
  87.                         <div>
  88.                             {% set currencyNotNull = event.priceCurrency ?? 'CHF' %}
  90.                             {% set currency = currencyNotNull == '' ? 'CHF' : currencyNotNull %}
  91.                             <h3 class="text-l font-bold">{{ event.price|format_currency(currency) }}</h3>
  92.                         </div>
  93.                     </div>
  94.                 {% endif %}
  96.                 {% if event.externalUrl %}
  97.                     <div class="flex items-center mt-2 text-indigo-500">
  98.                         <div class="pr-2">
  99.                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
  100.                                 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
  101.                             </svg>
  102.                         </div>
  103.                         <div>
  104.                             <a href="{{ event.externalUrl }}" target="_blank" rel="noopener noreferrer">
  105.                                 Plus d'informations
  106.                             </a>
  107.                         </div>
  108.                     </div>
  109.                 {% endif %}
  111.                 {% if event.description %}
  112.                     <div class="flex items-center mt-2 h-auto">
  113.                         <div class="pr-2 user-content">
  114.                             <p class="text-sm font-semibold text-gray-400">{{ event.description|raw }}</p>
  115.                         </div>
  116.                     </div>
  117.                 {% endif %}
  119.                 {% if event.isPartner %}
  120.                     <div class="text-orange-600 mt-2">Orgnanisation par un partenaire.</div>
  121.                 {% endif %}
  122.             </div>
  123.             <div class="text-center">
  124.                 {% if event.isOpen and not event.isExternalInscription and not event.isFull %}
  125.                     <a href="{{ path('app_evenement', { id: event.id, eventTitle: event.title }) }}">
  126.                         <div class="text-sm mt-6 px-4 py-2 bg-[#304FFE] text-white rounded-lg font-laonoto tracking-wider hover:bg-indigo-500 outline-none">S'inscrire</div>
  127.                     </a>
  128.                 {% else %}
  129.                     {% if event.isOpen and event.isExternalInscription and not event.isFull %}
  130.                         <a href="{{ event.externalUrl }}" target="_blank" rel="noopener noreferrer">
  131.                             <div class="text-sm mt-6 px-4 py-2 bg-[#304FFE] text-white rounded-lg font-laonoto tracking-wider hover:bg-indigo-500 outline-none">Informations et inscription</div>
  132.                         </a>
  133.                     {% else %}
  134.                         <div class="text-sm mt-6 px-4 py-2 bg-gray-500 text-white rounded-lg font-laonoto tracking-wider outline-none">Inscriptions non ouvertes</div>
  135.                     {% endif %}
  136.                 {% endif %}
  137.                 {% if event.isFull %}
  138.                     <p class="text-orange-600">Complet</p>
  139.                 {% endif %}
  140.             </div>
  141.         </div>
  142.         <div class="flex items-center">
  143.             <div class="bg-gradient-to-tr from-blue-600 to-indigo-600 max-w-56 ratio-1x1 rounded-2xl shadow-2xl shadow-[#304FFE] border-white border-dashed border-2 flex justify-center items-center">
  144.                 {% if event.illustration %}
  145.                     {% set image = sulu_resolve_media(event.illustration, 'fr') %}
  146.                     <img class="object-cover rounded-2xl" src="{{ image.formats['500x500'] }}" alt="{{ image.title }}" title="{{ event.title }}"/>
  147.                 {% endif %}
  148.             </div>
  149.         </div>
  150.     </div>
  151. {% endif %}