Symfony Profiler

{# templates/offer/roadtrip_show.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}O’Roadtrip - {{ offer.title }} | O Tropik – Agence de voyage en Guadeloupe {% endblock %}
{% block seo %}
<meta name="description" content="{{offer.description}}" >
<meta property="og:title" content="{{offer.metaTitle}}" />
<meta property="og:type" content="Website" />
<meta property="og:description" content="{{offer.metaDescription}}" />
<meta property="og:url" content="{{absolute_url( app.request.uri)}}" />
<meta property="og:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}" />
<meta name ="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{offer.metaTitle}}">
<meta name="twitter:description" content="{{offer.metaDescription}}">
<meta name="twitter:image" content="{#{asset('img/asset/cardimg-fb.jpg')}#}">
{% endblock %}
{% block body %}
{# HERO #}
<section class="hero hero--road is-animated position-relative text-white">
<div class="hero__media ratio ratio-21x9">
<img src="{{ asset('img/offer/road/' ~ offer.slug ~ '/' ~ (offer.img ?? 'hero.jpg')) }}"
class="hero__img w-100 h-100 object-fit-cover"
alt="{{ offer.title }}">
</div>
<div class="hero__overlay">
<div class="hero__card">
<h1 class="hero__title txt-ot-brown display-5 fw-bold mb-2">{{ offer.title }}</h1>
{% if offer.subtitle %}
<p class="hero__subtitle lead mb-0">{{ offer.subtitle }}</p>
{% endif %}
{% if offer.brochure %}
<div class="hero__actions">
<a href="{{ asset(offer.brochure) }}" target="_blank" class="btn btn-outline-primary">
📄 Télécharger la brochure
</a>
</div>
{% endif %}
</div>
</div>
</section>
<section class="container py-5">
<div class="row g-3 g-lg-4 mb-4">
<div class="col-12 col-md-6 col-lg-3">
<div class="card rounded-4 shadow-sm h-100"><div class="card-body">
<h6 class="fw-bold txt-ot-brown mb-1">Durée & dates</h6>
<p class="mb-0 text-muted">{{ offer.summaryDuration }}</p>
<p class="mb-0 text-muted">{{ offer.dateText }}</p>
</div></div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card rounded-4 shadow-sm h-100"><div class="card-body">
<h6 class="fw-bold txt-ot-brown mb-1">Vols</h6>
<ul class="list-unstyled mb-0">
{% for line in offer.summaryFlights|split("\n") %}
{% if line|trim != '' %}
<li class="mb-1">{{ line }}</li>
{% endif %}
{% endfor %}
</ul>
</div></div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card rounded-4 shadow-sm h-100"><div class="card-body">
<h6 class="fw-bold txt-ot-brown mb-1">Rythme & repas</h6>
<ul class="list-unstyled mb-0">
{% for line in offer.summaryPaceMeals|split("\n") %}
{% if line|trim != '' %}
<li>{{ line }}</li>
{% endif %}
{% endfor %}
</ul>
</div></div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="card rounded-4 shadow-sm h-100"><div class="card-body">
<h6 class="fw-bold txt-ot-brown mb-1">Tarif dès</h6>
<p class="small text-muted mb-0">{{ offer.priceFrom }}€</p>
</div></div>
</div>
</div>
{# ————— Points forts ————— #}
{% if highlight %}
<div class="row mb-4">
<div class="col-12 col-lg-6">
<p class="text-uppercase small fw-bold text-ot-brown mb-2">Nos coups de cœur</p>
<h2 class="h4 fw-bold mb-3 txt-ot-brown">Les incontournables de votre roadtrip</h2>
<p class="text-muted">Déserts, dunes, faune sauvage et sites rupestres : une immersion totale dans les grands espaces namibiens. </p>
</div>
<div class="col-12 col-lg-6">
<div class="d-flex flex-column gap-3">
{% for h in highlight %}
<div class="card border-0 shadow-sm rounded-4 w-100">
<div class="card-body d-flex align-items-start gap-2">
<i class="bi bi-check-circle-fill text-ot-green mt-1"></i>
<h3 class="h6 fw-semibold mb-0">{{ h.title }}</h3>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{# ————— Itinéraire jour par jour ————— #}
<div class="row g-4">
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4 h-100">
<div class="card-body">
<h2 class="h5 txt-ot-brown fw-bold mb-3">Itinéraire — jour par jour</h2>
<div class="list-group list-group-flush">
{% for it in itinerary %}
<div class="list-group-item px-0">
<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">
<span class="fw-bold ">Jour {{loop.index}} - {{it.title }}{% if it.kmLabel %} <span class="text-muted fw-normal"> ({{ it.kmLabel }}) km</span>{% endif %}</span>
<i class="bi bi-chevron-down"></i>
</button>
<div id="day{{ loop.index }}" class="collapse mt-2">
<p class="small text-muted mb-0">{{ it.details }}</p>
</div>
</div>
{% endfor %}
</div>
<p class="small text-muted mt-3 mb-0">Données synthétisées de la brochure.</p>
</div>
</div>
</div>
{# — CAROUSEL #}
<div class="col-12 col-lg-6 d-flex">
<div class="w-100 d-flex align-items-center">
<div id="circuitCarousel"
class="carousel slide rounded-4 overflow-hidden shadow-sm w-100"
data-bs-ride="carousel"
data-bs-interval="5000"
data-bs-pause="hover"
data-bs-touch="true"
aria-label="Galerie circuit">
<div class="carousel-inner">
{% for p in photoItinerary %}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<div class="ratio ratio-4x3">
<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 }}">
</div>
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#circuitCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Précédent</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#circuitCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Suivant</span>
</button>
<div class="carousel-indicators">
{% for p in photoItinerary %}
<button type="button"
data-bs-target="#circuitCarousel"
data-bs-slide-to="{{ loop.index0 }}"
class="{% if loop.first %}active{% endif %}"
aria-current="{{ loop.first ? 'true' : 'false' }}"
aria-label="Slide {{ loop.index }}"></button>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
{% if hebergementOffer %}
{# =====================================================
5) HÔTELS — liste ou tableau simple
===================================================== #}
<section class="py-5 bg-body-tertiary" id="hotels">
<div class="container">
<h2 class="h3 txt-ot-brown fw-bold mb-3">Hébergements prévus (ou similaires)</h2>
<ul class="list-group">
{% for h in hebergementOffer %}<li class="list-group-item">{{ h.name }}</li>{% endfor %}
</ul>
</div>
</section>
{% endif %}
{% if offer.widget %}
<div class="container">
<h2 class="h3 txt-ot-brown fw-bold mb-3">Activités</h2>
<div class="widget">
{{offer.widget|raw}}
</div>
</div>
{% endif %}
{% if included %}
{# =====================================================
6) INCLUS / NON INCLUS — deux colonnes
===================================================== #}
<section class="py-5 bg-white" id="inclus">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4 h-100">
<div class="card-body">
<h2 class="h5 fw-bold txt-ot-brown">Inclus</h2>
<ul class="small mb-0 list-unstyled">
{% for i in included|filter(i => i.type == 'in') %}
<li>✔️ {{ i.label }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4 h-100">
<div class="card-body">
<h2 class="h5 fw-bold txt-ot-brown">Non inclus</h2>
<ul class="small mb-0 list-unstyled">
{% for e in included|filter(e => e.type == 'out') %}
<li>— {{ e.label }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
{% endif %}
{#
<div class="card border-0 shadow-sm rounded-4">
<div class="card-body">
<h3 class="h6 fw-bold mb-2">Tarifs</h3>
{% set roomPrices = offer.roomPrices|default([
{label:'Double', price:4730},
{label:'Triple', price:4410},
{label:'Quadruple', price:4140},
{label:'Single', price:null}
]) %}
<div class="row row-cols-2 g-2">
{% for r in roomPrices %}
<div class="col">
<div class="border rounded-3 p-2 small h-100 d-flex justify-content-between">
<span class="text-muted">{{ r.label }}</span>
<strong>{% if r.price %}{{ r.price }}€{% else %}—{% endif %}</strong>
</div>
</div>
{% endfor %}
</div>
<p class="small text-muted mb-0 mt-2">Tarifs/personne, sous réserve de dispo & modifs. :contentReference[oaicite:3]{index=3}</p>
</div>
</div> #}
{% if flight %}
{# =====================================================
7) VOLS & HORAIRES — bloc détaillé
===================================================== #}
<section class="py-5 bg-body-tertiary" id="vols">
<div class="container">
<h2 class="h3 txt-ot-brown fw-bold mb-3">Vols & horaires (indicatifs)</h2>
<div class="row g-4">
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4 h-100">
<div class="card-body">
<h3 class="h6 fw-bold mb-2">Aller</h3>
<ul class="small mb-0">
{% for f in flight %}
{% if f.type == '1' %}
<li>{{ f.departureCity }} → {{ f.departureCity }} {{f.departureTime}} / {{f.arrivalTime}} </li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4 h-100">
<div class="card-body">
<h3 class="h6 fw-bold mb-2">Retour</h3>
<ul class="small mb-0">
{% for f in flight %}
{% if f.type == '2' %}
<li>{{ f.departureCity }} → {{ f.departureCity }} {{f.departureTime}} / {{f.arrivalTime}} </li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<p class="small text-muted mt-3 mb-0">Horaires et compagnies susceptibles d’évolution. À confirmer à l’émission des billets.</p>
</div>
</section>
{% endif %}
{% if infos %}
{# =====================================================
9) FACILITÉS DE PAIEMENT — encart
===================================================== #}
<section class="py-5 bg-body-tertiary" id="paiement">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4">
<div class="card-body">
<h2 class="h5 fw-bold txt-ot-brown">Facilités de paiement</h2>
<ul class="small mb-0">
{% for line in offer.paymentMethod|split("\n") %}
<li class="mb-1">✔️ {{ line }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card border-0 shadow-sm rounded-4">
<div class="card-body">
<h2 class="h5 fw-bold txt-ot-brown">Formalités</h2>
<ul class="small mb-0">
{% for line in offer.formalities|split("\n") %}
<li class="mb-1">✔️ {{ line }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
{% endif %}
{# =====================================================
11) CTA FINAL — devis & contact
===================================================== #}
<section class="py-5 bg-ot-green text-white text-center">
<div class="container">
<h2 class="h4 fw-bold mb-2">Envie de rejoindre le {{offer.title}} ?</h2>
<p class="mb-4">Parlez à un conseiller Otropik : on s’occupe de tout.</p>
<div class="d-flex gap-2 justify-content-center flex-wrap">
<a href="{{ path('o.devis') }}" class="btn btn-light rounded-pill">Demander un devis</a>
<a href="tel:0590505134" class="btn btn-outline-light rounded-pill">Appeler</a>
</div>
</div>
</section>
{% endblock %}

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