templates/event/detail.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block title %}SoliBikes : {{ event.title }} {% endblock %}
  3. {% block description %}SoliBikes : {{ event.title }} {% endblock %}
  4. {% block imageog %}https://solibikes.com{{ asset('uploads/') ~ event.principalimage }}{% endblock %}
  5. {% block urlog %}https://solibikes.com{{ path('frontend_event_detail', {'alias': event.alias}) }}{% endblock %}
  6. {% block titleog %}SoliBikes : {{ event.title }} {% endblock %}
  7. {% block ogdescription %}SoliBikes : {{ event.title }} {% endblock %}
  9. {% block body %}
  10.     <!-- Page Title -->
  11.     <section class="page-title bg-transparent">
  12.         <div class="container">
  13.             <div class="page-title-row">
  15.                 <div class="page-title-content">
  16.                     <h1>{{ event.title }}</h1>
  17.                 </div>
  19.                 <nav aria-label="breadcrumb">
  20.                     <ol class="breadcrumb">
  21.                         <li class="breadcrumb-item">
  22.                             <a href="{{ path('frontend_index') }}">Acceuil</a>
  23.                         </li>
  24.                         <li class="breadcrumb-item">
  25.                             <a href="{{ path('frontend_event_liste') }}">Événements</a>
  26.                         </li>
  27.                         <li class="breadcrumb-item active" aria-current="page">{{ event.title }}</li>
  28.                     </ol>
  29.                 </nav>
  31.             </div>
  32.         </div>
  33.     </section>
  34.     <!-- .page-title end -->
  36.     <!-- Content -->
  37.     <section id="content">
  38.         <div class="content-wrap bg-light overflow-visible pb-0">
  39.             <div class="container">
  40.                 <div class="single-event">
  42.                     <div class="row flex-lg-row-reverse gutter-40">
  43.                         <div class="col-lg-4 position-lg-sticky h-100" style="top: 100px;">
  44.                             <div class="event-meta bg-white shadow-sm p-4 rounded-4 mb-3">
  45.                                 <h4 class="mb-4 fs-5 fw-semibold">Détails</h4>
  47.                                 <ul class="mb-0">
  48.                                     <li class="row gx-3 gy-4 mb-4">
  49.                                         <div class="col-auto">
  50.                                             <i class="box-square-sm d-flex align-items-center justify-content-center bi-calendar4-event fs-3 color position-relative"></i>
  51.                                         </div>
  52.                                         <div class="col mb-0 op-09 ps-3 fs-6">Date début
  53.                                             <br>{{ event.start| date('d-m-Y H:i')  }}
  54.                                         </div>
  55.                                     </li>
  57.                                     <li class="row gx-3 gy-4 mb-4">
  58.                                         <div class="col-auto">
  59.                                             <i class="box-square-sm d-flex align-items-center justify-content-center bi-calendar4-event fs-3 color position-relative"></i>
  60.                                         </div>
  61.                                         <div class="col mb-0 op-09 ps-3 fs-6">Date fin
  62.                                             <br>{{ event.end| date('d-m-Y H:i')  }}</div>
  63.                                     </li>
  65.                                     <li class="row gx-3 gy-4 mb-4">
  66.                                         <div class="col-auto">
  67.                                             <i class="box-square-sm d-flex align-items-center justify-content-center fa-solid fa-level-up-alt fs-3 color position-relative"></i>
  68.                                         </div>
  69.                                         <div class="col mb-0 op-09 ps-3 fs-6">Difficulté
  70.                                             <br>{{ event.difficulty }}</div>
  71.                                     </li>
  73.                                     <li class="row gx-3 gy-4">
  74.                                         <div class="col-auto">
  75.                                             <i class="box-square-sm d-flex align-items-center justify-content-center fa-solid fa-route fs-3 color position-relative"></i>
  76.                                         </div>
  77.                                         <div class="col mb-0 op-09 ps-3 fs-6">Trajet
  78.                                             <br>{{ event.journey }}
  79.                                             Km
  80.                                         </div>
  81.                                     </li>
  82.                                 </ul>
  84.                             </div>
  85.                         </div>
  86.                         <div class="event-meta bg-white shadow-sm col-lg-8 cairo-45">
  87.                             <div class="entry-image mb-5">
  88.                                 <a href="#"><img src="{{ asset('uploads/') ~ event.banner }}" alt="{{ event.title }}" class="rounded-4"></a>
  89.                             </div>
  91.                             <h1 class="mb-3" style="text-align: center">{{ event.title }}</h1>
  93.                             <p>{{ event.detailedDescription | raw }}-</p>
  94.                             <p><img src="{{ asset('uploads/') ~ event.principalimage }}" width="450">
  95.                                 {% for image in event.multipleimage %}
  96.                                 <img src="{{ asset('uploads/') ~ image }}" style="width: 100%;">
  97.                                 {% endfor%}
  99.                             </p>
  101.                                     {% if event.statut %}
  102.                             <div class="col-auto">
  103.                                         <a href="https://app.solibikes.com/#/order/{{ event.alias }}" class="button rounded-4 fw-normal button-green" style="width: 100%;">Réserver</a>
  104.                                     </div>
  105.                                     {% else %}
  107.                                     Désolé, les réservations sont actuellement complètes. Veuillez nous rejoindre pour les prochaines sorties vélo.  À bientôt !
  108.                                     {% endif %}
  109.                         </div>
  110.                     </div>
  112.                 </div>
  113.             </div>
  115.             <div class="bg-white w-100 py-4 shadow-sm position-sticky bottom-0 mt-6">
  117.                 <div class="row align-items-center justify-content-between mx-0 px-2">
  118.                     <div class="col-auto">
  119.                         <a href="#" class="d-flex align-items-center justify-content-center">
  120.                             <i class="fs-2 bi-chevron-left text-black h-color align-middle"></i>
  121.                         </a>
  122.                     </div>
  123.                     <div class="col">
  124.                         <div class="container px-0">
  125.                             <div class="row align-items-center justify-content-between mx-0">
  126.                                 <div class="col-auto d-none d-md-block">
  127.                                     <h4 class="fs-5 fw-medium mb-0">{{ event.title }}</h4>
  128.                                 </div>
  130.                                 {% if date("now"| date('d-m-Y H:i')) < date(event.end| date('d-m-Y H:i')) %}
  131.                                     <div class="col-auto ms-md-auto">
  132.                                         Prix avec location vélo
  133.                                         <strong>{{ event.priceWithBike }}
  134.                                             DT</strong><br>
  135.                                         Prix sans loaction vélo (J'ai mon vélo)
  136.                                         <strong>{{ event.priceWithoutBike }}
  137.                                             DT</strong>
  138.                                     </div>
  139.                                     {% if event.statut %}
  140.                                     <div class="col-auto">
  141.                                         <a href="https://app.solibikes.com/#/order/{{ event.alias }}" class="button rounded-4 fw-normal text-center m-0 px-4" >Réserver</a>
  142.                                     </div>
  143.                                     {% else %}
  144.                                     <div class="col-auto">
  145.                                         <a href="#" class="button rounded-4 fw-danger text-center m-0 px-4" style="background: red;">Complet</a>
  146.                                     </div>
  147.                                 {% endif %}
  148.                                 {% endif %}
  149.                             </div>
  150.                         </div>
  151.                     </div>
  152.                     <div class="col-auto">
  153.                         <a href="#" class="d-flex align-items-center justify-content-center">
  154.                             <i class="fs-2 bi-chevron-right text-black h-color align-middle"></i>
  155.                         </a>
  156.                     </div>
  157.                 </div>
  159.             </div>
  160.         </div>
  161.     </section>
  162.     <!-- #content end -->
  163. {% endblock %}
  165. {% block javascripts %}
  166.     <script src="{{ asset('frontend/js/plugins.lightbox.js') }}"></script>
  167.     <script src="{{ asset('frontend/js/plugins.isotope.js') }}"></script>
  168.     <script src="{{ asset('frontend/js/fn.masonrythumbs.js') }}"></script>
  169.     <script src="{{ asset('frontend/js/module.masonrythumbs.js') }}"></script>
  170. {% endblock %}