templates/default/croisiere-destination.html.twig line 1

Open in your IDE?
  1. {# templates/croisiere/show.html.twig #}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}{{offer.title}} — O’Croisière{% endblock %}
  5. {% block body %}
  6. {# HERO #}
  7. <section class="position-relative text-white">
  8.   <div class="ratio ratio-21x9">
  9.     <img src="{{asset('img/croisiere/' ~ offer.slug ~ '/' ~ offer.img )}}"
  10.          class="w-100 h-100 object-fit-cover" alt="{{ offer.title }}">
  11.   </div>
  12.   <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center text-center bg-opacity-40">
  13.     <div class="px-3">
  14.       <h1 class="display-5 fw-bold mb-2">{{offer.title}}</h1>
  15.        <p class="lead mb-0">{{ offer.subtitle }}</p>
  16.     </div>
  17.   </div>
  18. </section>
  20. <section class="container py-5">
  21.   <div class="row g-4">
  22.     {# NAVIRE + META + BLOCS TEXTE #}
  23.     <div class="col-12 col-lg-5">
  24.       <div class="card border-0 shadow-sm rounded-4">
  25.         <div class="ratio ratio-4x3 rounded-top-4 overflow-hidden">
  26.           <div id="circuitCarousel"
  27.                class="carousel slide rounded-4 overflow-hidden shadow-sm w-100"
  28.                data-bs-ride="carousel"
  29.                data-bs-interval="5000"
  30.                data-bs-pause="hover"
  31.                data-bs-touch="true"
  32.                aria-label="Galerie circuit">
  34.             <div class="carousel-inner">
  35.               {% for p in photoItinerary %}
  36.                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  37.                   <div class="ratio ratio-4x3">
  38.                     <img src="{{asset('img/' ~ p.offer.file  ~ '/' ~ p.offer.slug  ~ '/itinerary/' ~ p.img)}}" class="d-block w-100 h-100 object-fit-cover" alt="Photo circuit {{ loop.index }}">
  39.                   </div>
  40.                 </div>
  41.               {% endfor %}
  42.             </div>
  43.              <button class="carousel-control-prev" type="button" data-bs-target="#circuitCarousel" data-bs-slide="prev">
  44.               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  45.               <span class="visually-hidden">Précédent</span>
  46.             </button>
  47.             <button class="carousel-control-next" type="button" data-bs-target="#circuitCarousel" data-bs-slide="next">
  48.               <span class="carousel-control-next-icon" aria-hidden="true"></span>
  49.               <span class="visually-hidden">Suivant</span>
  50.             </button>
  52.             <div class="carousel-indicators">
  53.               {% for p in photoItinerary %}
  54.                 <button type="button"
  55.                         data-bs-target="#circuitCarousel"
  56.                         data-bs-slide-to="{{ loop.index0 }}"
  57.                         class="{% if loop.first %}active{% endif %}"
  58.                         aria-current="{{ loop.first ? 'true' : 'false' }}"
  59.                         aria-label="Slide {{ loop.index }}"></button>
  60.               {% endfor %}
  61.             </div>
  62.           </div>
  64.         </div>
  65.         <div class="card-body">
  66.           <h2 class="h4 txt-ot-blue fw-bold mb-1">Les atouts de la croisiere</h2>
  67.           <div class="d-flex flex-wrap gap-2 mb-2">
  68.           {% for h in highlight %}<span class="badge rounded-pill bg-success-subtle text-success-emphasis">{{ h.title }}</span>{% endfor %} 
  69.           </div>
  70.          {# <ul class="small text-muted list-unstyled mb-0">
  71.            <li><strong>Opérateur :</strong> {{ program.operator }} fly</li>
  72.             <li><strong>Embarquement :</strong> {{ program.embark_port }} aéoport</li>
  73.             <li><strong>Débarquement :</strong> {{ program.disembark_port }} wesh</li>
  74.             <li><strong>Départ aéroport :</strong> {{ program.home_airport }} aeoport</li> 
  75.           </ul> #}
  76.         </div>
  77.       </div>
  79.       <div class="card border-0 shadow-sm rounded-4 mt-4">
  80.         <div class="card-body">
  81.           <h3 class="h6 txt-ot-blue fw-bold mb-2">Inclus</h3>
  82.           <ul class="small m-0">
  83.            {% for i in included|filter(i => i.type == 'in') %}
  84.               <li>{{ i.label }}</li>
  85.             {% endfor %}
  86.           </ul>
  87.           <hr>
  88.           <h3 class="h6 txt-ot-blue fw-bold mb-2">Non inclus</h3>
  89.           <ul class="small m-0">
  90.             {% for e in included|filter( e => e.type == 'out') %}
  91.               <li>{{ e.label }}</li>
  92.             {% endfor %}
  93.           </ul>
  94.         </div>
  95.       </div>
  97.       <div class="card border-0 shadow-sm rounded-4 mt-4">
  98.         <div class="card-body small">
  99.          <h3 class="h6 txt-ot-blue fw-bold mb-2">Formalités</h3>
  100.            <ul class="m-0">
  101.           {% for f in infos|filter(f => f.type == 'formalites') %}
  102.             <li class="">{{ f.title }}</li>
  103.           {% endfor %}
  104.           </ul>
  105.           <hr>
  106.            <h3 class="h6 txt-ot-blue fw-bold mb-2">Modalités de paiement</h3>
  107.             <ul class="m-0">
  108.           {% for pay in infos|filter(pay => pay.type == 'paiement') %}
  109.             <li class="mb-0">{{ pay.title }}</li>
  110.           {% endfor %}
  111.           </ul>
  112.         </div>
  113.       </div>
  114.     </div>
  116.     {# ITINÉRAIRE + DATES/PRIX #}
  117.     <div class="col-12 col-lg-7">
  119.   <!-- Ligne 1 : Durée / Vols / Tarif -->
  120.   <div class="row g-3 mb-4">
  122.     <!-- Durée -->
  123.     <div class="col-12 col-md-4">
  124.       <div class="card rounded-4 shadow-sm h-100">
  125.         <div class="card-body">
  126.           <h6 class="fw-bold mb-1">Durée</h6>
  127.           <p class="mb-0 text-muted">{{ offer.summaryDuration }}</p>
  128.         </div>
  129.       </div>
  130.     </div>
  132.     <!-- Vols -->
  133.     <div class="col-12 col-md-4">
  134.       <div class="card rounded-4 shadow-sm h-100">
  135.         <div class="card-body">
  136.           <h6 class="fw-bold mb-1">Vols</h6>
  137.           <ul class="mb-0 ps-3">
  138.             {% for line in offer.summaryFlights|split("\n") %}
  139.               {% if line|trim != '' %}
  140.                 <li>{{ line }}</li>
  141.               {% endif %}
  142.             {% endfor %}
  143.           </ul>
  144.         </div>
  145.       </div>
  146.     </div>
  148.     <!-- Tarif -->
  149.     <div class="col-12 col-md-4">
  150.       <div class="card rounded-4 shadow-sm h-100">
  151.         <div class="card-body">
  152.           <h6 class="fw-bold mb-1">Tarif à partir de</h6>
  153.           <p class="mb-0 text-muted">{{ offer.priceFrom }} €</p>
  154.         </div>
  155.       </div>
  156.     </div>
  158.   </div>
  160.   <!-- Ligne 2 : Rythme -->
  161.   <div class="row g-3 mb-4">
  162.     <div class="col-12">
  163.       <div class="card rounded-4 shadow-sm h-100">
  164.         <div class="card-body">
  165.           <h6 class="fw-bold mb-1">Rythme</h6>
  166.           <ul class="mb-0 ps-3">
  167.             {% for line in offer.summaryPaceMeals|split("\n") %}
  168.               {% if line|trim != '' %}
  169.                 <li>{{ line }}</li>
  170.               {% endif %}
  171.             {% endfor %}
  172.           </ul>
  173.         </div>
  174.       </div>
  175.     </div>
  178. </div>
  179.       <div class="card border-0 shadow-sm rounded-4 mb-4">
  180.         <div class="card-body">
  181.          <h2 class="h5 txt-ot-blue fw-bold mb-3">Itinéraire — jour par jour</h2>
  182.           <div class="list-group list-group-flush">
  183.             {% for it in itinerary %}
  184.               <div class="list-group-item px-0">
  185.                 <button class="btn w-100 d-flex justify-content-between align-items-center text-start" data-bs-toggle="collapse" data-bs-target="#day{{ loop.index }}" aria-expanded="false">
  186.                   <span class="fw-bold">Jour {{loop.index}} - {{it.title }}{% if it.kmLabel %} <span class="text-muted fw-normal"> ({{ it.kmLabel }}) km</span>{% endif %}</span>
  187.                   <i class="bi bi-chevron-down"></i>
  188.                 </button>
  189.                 <div id="day{{ loop.index }}" class="collapse mt-2">
  190.                   <p class="small text-muted mb-0">{{ it.details }}</p>
  191.                 </div>
  192.               </div>
  193.             {% endfor %}
  194.           </div>
  195.          {# {% if program.map_image %}
  196.             <img src="{{ asset(program.map_image) }}" class="img-fluid rounded-3 mt-3" alt="Carte">
  197.           {% endif %} #}
  198.         </div>
  199.       </div>
  200.   {% if hebergementOffer %}
  201. {# =====================================================
  202.    5) HÔTELS — liste ou tableau simple
  203. ===================================================== #}
  204.     <h3 class="h5 txt-ot-blue fw-bold mt-3 mb-3">Hébergements prévus (ou similaires)</h3>
  205.     <ul class="list-group">
  206.       {% for h in hebergementOffer %}<li class="list-group-item">{{ h.name }}</li>{% endfor %}
  207.     </ul>
  208. {% endif %}
  210. {% if flight %}
  211. {# =====================================================
  212.    7) VOLS & HORAIRES — bloc détaillé
  213. ===================================================== #}
  214.     <h3 class="h5 txt-ot-blue fw-bold mt-3 mb-3">Vols & horaires (indicatifs)</h2>
  215.     <div class="row g-4">
  216.       <div class="col-12 col-lg-6">
  217.         <div class="card border-0 shadow-sm rounded-4 h-100">
  218.           <div class="card-body">
  219.             <h3 class="h6 fw-bold mb-2">Aller</h3>
  220.             <ul class="small mb-0">
  221.             {% for f in flight %}
  222.               {% if f.type == '1' %}
  223.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  224.               {% endif %}
  225.             {% endfor %}
  226.             </ul>
  227.           </div>
  228.         </div>
  229.       </div>
  230.       <div class="col-12 col-lg-6">
  231.         <div class="card border-0 shadow-sm rounded-4 h-100">
  232.           <div class="card-body">
  233.             <h3 class="h6 fw-bold mb-2">Retour</h3>
  234.             <ul class="small mb-0">
  235.             {% for f in flight %}
  236.               {% if f.type == '2' %}
  237.                 <li>{{ f.departureCity }} → {{ f.departureCity }}  {{f.departureTime}} / {{f.arrivalTime}} </li>
  238.               {% endif %}
  239.             {% endfor %}
  240.             </ul>
  241.           </div>
  242.         </div>
  243.       </div>
  244.     </div>
  245.     <p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
  246. {% endif %}
  247.     {#  <div class="card border-0 shadow-sm rounded-4">
  248.         <div class="card-body">
  249.           <h3 class="h5 fw-bold mb-3">Dates </h3>
  250.           <div class="table-responsive">
  251.             <table class="table table-striped table-sm">
  252.               <thead class="table-light">
  253.                 <tr><th>Période</th></tr>
  254.               </thead>
  255.               <tbody>
  256.                 {% for p in program.prices %}
  257.                   <tr>
  258.                     <td>{{ p.period_label }}</td>
  259.                     <td>{{ p.price_inside }}€</td>
  260.                     <td>{{ p.price_oceanview }}€</td>
  261.                     <td>{{ p.price_balcony }}€</td>
  262.                     <td>{{ p.price_3rd4th_adult ?? '—' }}</td>
  263.                     <td>{{ p.price_3rd4th_child ?? '—' }}</td>
  264.                   </tr>
  265.                 {% endfor %}
  266.               </tbody>
  267.             </table>
  268.           </div>
  269.         </div>
  270.       </div>
  272.       <div class="d-flex justify-content-end mt-4">
  273.         <a href="{#{ path('app_demander_devis') }}" class="btn btn-primary rounded-pill px-4">Demander un devis</a>
  274.       </div>#}
  275.     </div>
  276.   </div>
  277. </section>
  278. {% endblock %}