templates/circuit/detail.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block body %}
  4.     <!-- Page Title -->
  5.     <section class="page-title bg-transparent">
  6.         <div class="container">
  7.             <div class="page-title-row">
  9.                 <div class="page-title-content">
  10.                     <h1>{{ circuit.title }}</h1>
  11.                 </div>
  13.                 <nav aria-label="breadcrumb">
  14.                     <ol class="breadcrumb">
  15.                         <li class="breadcrumb-item">
  16.                             <a href="{{ path('frontend_index') }}">Acceuil</a>
  17.                         </li>
  18.                         <li class="breadcrumb-item">
  19.                             <a href="{{ path('frontend_circuit_liste') }}">Circuits</a>
  20.                         </li>
  21.                         <li class="breadcrumb-item active" aria-current="page">{{ circuit.title }}</li>
  22.                     </ol>
  23.                 </nav>
  25.             </div>
  26.         </div>
  27.     </section>
  28.     <!-- .page-title end -->
  30.     <!-- Content -->
  31.     <section id="content">
  32.         <div class="content-wrap bg-light overflow-visible pb-0">
  33.             <div class="container">
  34.                 <div class="single-event">
  36.                     <div class="row flex-lg-row-reverse gutter-40">
  37.                         <div class="col-lg-4 position-lg-sticky h-100" style="top: 100px;">
  38.                         
  39.                             <div class="event-meta bg-white shadow-sm p-4 rounded-4 mb-3">
  40.                                 <h4 class="mb-4 fs-5 fw-semibold">Event Info</h4>
  41.                                 <ul class="mb-0">
  42.                                     <li class="row gx-3 gy-4 mb-4">
  43.                                         <div class="col-auto">
  44.                                             <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>
  45.                                         </div>
  46.                                         <div class="col mb-0 op-09 ps-3 fs-6">Difficulté
  47.                                             <br>{{ circuit.difficulty  }}
  48.                                         </div>
  49.                                     </li>
  51.                                     <li class="row gx-3 gy-4 mb-4">
  52.                                         <div class="col-auto">
  53.                                             <i class="box-square-sm d-flex align-items-center justify-content-center fa-solid fa-route fs-3 color position-relative"></i>
  54.                                         </div>
  55.                                         <div class="col mb-0 op-09 ps-3 fs-6">Distance
  56.                                             <br>{{ circuit.distance  }}
  57.                                             Km</div>
  58.                                     </li>
  60.                                     <li class="row gx-3 gy-4 mb-4">
  61.                                         <div class="col-auto">
  62.                                             <i class="box-square-sm d-flex align-items-center justify-content-center fa-solid fa-clock fs-3 color position-relative"></i>
  63.                                         </div>
  64.                                         <div class="col mb-0 op-09 ps-3 fs-6">Durée
  65.                                             <br>{{ circuit.duration }}
  66.                                             Min</div>
  67.                                     </li>
  69.                                     <li class="row gx-3 gy-4 mb-4">
  70.                                         <div class="col-auto">
  71.                                             <i class="box-square-sm d-flex align-items-center justify-content-center uil-pricetag-alt fs-3 color position-relative"></i>
  72.                                         </div>
  73.                                         <div class="col mb-0 op-09 ps-3 fs-6">Prix avec location vélo
  74.                                         <strong>{{ circuit.priceWithBike }}
  75.                                             DT</strong><br>
  76.                                         Prix sans loaction vélo 
  77.                                         <strong>{{ circuit.priceWithoutBike }}
  78.                                             DT</strong></div>
  79.                                     </li>
  80.                                 </ul>
  81.                             </div>
  83.                             <div class="d-flex justify-content-end">
  84.                                 <a href="#" class="social-icon si-small border-transparent op-03 h-op-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Facebook">
  85.                                     <i class="fa-brands fa-facebook-f text-dark h-color-facebook m-0"></i>
  86.                                 </a>
  88.                                 <a href="#" class="social-icon si-small border-transparent op-03 h-op-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on Twitter">
  89.                                     <i class="fa-brands fa-twitter text-dark h-color-twitter m-0"></i>
  90.                                 </a>
  92.                                 <a href="#" class="social-icon si-small border-transparent op-03 h-op-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Share on LinkedIn">
  93.                                     <i class="fa-brands fa-linkedin text-dark h-color-linkedin m-0"></i>
  94.                                 </a>
  96.                                 <a href="#" class="social-icon si-small border-transparent op-03 h-op-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Send by Email">
  97.                                     <i class="fa-solid fa-envelope text-dark h-color-email m-0"></i>
  98.                                 </a>
  100.                                 <a href="#" class="social-icon si-small border-transparent op-03 h-op-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy Link">
  101.                                     <i class="bi-clipboard text-dark h-color m-0"></i>
  102.                                 </a>
  103.                             </div>
  104.                         </div>
  106.                         <div class="event-meta bg-white shadow-sm col-lg-8 " style="font-size: 1.5em;">
  107.                             <div class="entry-image mb-5">
  108.                                 <a href="#"><img src="{{ asset('uploads/') ~ circuit.image }}" alt="{{ circuit.title }}" class="rounded-4"></a>
  109.                             </div>
  111.                             
  112.                             <p>{{ circuit.description | raw }}</p>
  115.                             <div class="row col-mb-80 mt-5">
  117.                                 {% if circuit.images %}
  118.                                     <div class="col-md-12">
  119.                                         <!-- Events Single Gallery Thumbs -->
  120.                                         <div class="masonry-thumbs row grid-container" data-lightbox="gallery">
  121.                                             {% for i in circuit.images %}
  122.                                                 <a class="grid-item" href="{{ asset('uploads/') ~ i }}" data-lightbox="gallery-item">
  123.                                                     <img src="{{ asset('uploads/') ~ i }}" alt="Gallery Thumb 1"></a>
  124.                                             {% endfor %}
  125.                                         </div>
  126.                                         <!-- Event Single Gallery Thumbs End -->
  127.                                     </div>
  128.                                 {% endif %}
  129.                             </div>
  131.                         </div>
  132.                     </div>
  134.                 </div>
  135.             </div>
  137.             <div class="bg-white w-100 py-4 shadow-sm position-sticky bottom-0 mt-6">
  139.                 <div class="row align-items-center justify-content-between mx-0 px-2">
  140.                     <div class="col-auto">
  141.                         <a href="#" class="d-flex align-items-center justify-content-center">
  142.                             <i class="fs-2 bi-chevron-left text-black h-color align-middle"></i>
  143.                         </a>
  144.                     </div>
  145.                     <div class="col">
  146.                         <div class="container px-0">
  147.                             <div class="row align-items-center justify-content-between mx-0">
  148.                                 <div class="col-auto d-none d-md-block">
  149.                                     <h4 class="fs-5 fw-medium mb-0">{{ circuit.title }}</h4>
  150.                                 </div>
  151.                                 <div class="col-auto ms-md-auto">
  152.                                         Prix avec location vélo
  153.                                         <strong>{{ circuit.priceWithBike }}
  154.                                             DT</strong><br>
  155.                                         Prix sans loaction vélo (J'ai mon vélo)
  156.                                         <strong>{{ circuit.priceWithoutBike }}
  157.                                             DT</strong>
  158.                                     </div>
  159.                                 <div class="col-auto">
  160.                                     <a href="https://app.solibikes.com/#/order/circuit/{{ circuit.alias }}" class="button rounded-4 fw-normal text-center m-0 px-4">Réserver</a>
  161.                                 </div>
  162.                             </div>
  163.                         </div>
  164.                     </div>
  165.                     <div class="col-auto">
  166.                         <a href="#" class="d-flex align-items-center justify-content-center">
  167.                             <i class="fs-2 bi-chevron-right text-black h-color align-middle"></i>
  168.                         </a>
  169.                     </div>
  170.                 </div>
  171.             </div>
  172.         </div>
  173.     </section>
  174.     <!-- #content end -->
  175. {% endblock %}
  177. {% block javascripts %}{% endblock %}