{% extends 'base.html.twig' %}

{% block title %}Découvrez notre produit : {{ vehicule.name }} chez {{ metaP().raisonSociale }} à {{ metaP().villeOpti }} {% endblock %}
{% block metaTitle %}{% if vehicule.metaTitre %}{{ vehicule.metaTitre|replaceConfig|replaceVehicule(vehicule.id) }}{% else %}{{ metaP().metaTitreVehicule|replaceConfig }}{% endif %}{% endblock %}
{% block metaDescription %}{% if vehicule.metaDescription %}{{ vehicule.metaDescription|replaceConfig|replaceVehicule(vehicule.id) }}{% else %}{{ metaP().metaDescVehicule|replaceConfig }}{% endif %}{% endblock %}

{% block body %}
<!-- Car Details Section Begin -->
<article id="article" class="car-details spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="car__details__pic">
                    <div data-swiper="1,1,1,1,30">
                        <div class="overflow-hidden toSwiper">
                            <div class="car__details__pic__large swiper-wrapper">
                                {% for image in vehicule.imageVehicules %}
                                <div class="swiper-slide">
                                    <img class="swiper-slide-container car-big-img" src="{{ asset(produitV ~ image.name) }}" loading="lazy" alt="{{ vehicule.translations[app.request.locale].name|default('') }}">
                                </div>
                                {% endfor %}
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="car-thumbs swiper-container hidden">
                        <div class="car-thumbs-track car__thumb__slider swiper-wrapper">
                            {% for image in vehicule.imageVehicules %}
                            <div class="swiper-slide">
                                <div class="ct swiper-slide-container" data-imgbigurl="{{ asset(produitV ~ image.name) }}"><img src="{{ asset(produitV ~ image.name) }}" loading="lazy" alt="{{ vehicule.translations[app.request.locale].name|default('') }}"></div>
                            </div>
                            {% endfor %}
                        </div>
                    </div> -->
                </div>
                <div class="car__details__tab">
                    <ul class="nav nav-tabs" id="vehicule-flters">
                        <li data-filter=".filter-0" class="nav-item">
                            <a class="nav-link">Véhicule</a>
                        </li>
                        <li data-filter=".filter-1" class="nav-item filter-active">
                            <a class="nav-link nav-item" >Description</a>
                        </li>
                        <li data-filter=".filter-2" class="nav-item">
                            <a class="nav-link">Option du vehicule</a>
                        </li>
                    </ul>
                    <div class="tab-content vehicule-container filter">
                        <div class="vehicule-item filter-1">
                            <div class="car__details__tab__info">
                                <div class="car__details__tab__info__item">
                                    <h5>Information générale</h5>
                                    {{ vehicule.translations[app.request.locale].description|default('')|raw }}
                                </div>
                            </div>
                        </div>
                        <div class="vehicule-item filter-2">
                            <div class="car__details__tab__info">
                                <div class="car__details__tab__info__item">
                                    <h5>Equipement</h5>
                                    {{ vehicule.translations[app.request.locale].equipements|default('')|raw }}
                                </div>
                            </div>
                        </div>
                        <div class="vehicule-item filter-0">
                            <div class="car__details__tab__info">
                                <div class="car__details__tab__info__item">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6">
                                            <div class="car__details__tab__info__item">
                                                <ul>
                                                    <li><i class="fa fa-check"></i>Finition : {{ vehicule.finition }}</li>
                                                    <li><i class="fa fa-check"></i>Marque : {{ vehicule.marque.name }}</li>
                                                    <li><i class="fa fa-check"></i>Carburant : {{ vehicule.carburant }}</li>
                                                    <li><i class="fa fa-check"></i>Boite : {{ vehicule.boite }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="car__details__tab__info__item">
                                                <ul>
                                                    <li><i class="fa fa-check"></i>kilometrage : {{ vehicule.kilometrage }}</li>
                                                    <li><i class="fa fa-check"></i>Millesime : {{ vehicule.millesime }}</li>
                                                    <li><i class="fa fa-check"></i>Couleur : {{ vehicule.couleur }}</li>
                                                    <li><i class="fa fa-check"></i>Garantie : {{ vehicule.garantie }} ans</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="car__details__tab__info__item">
                                                <ul>
                                                    <li><i class="fa fa-check"></i>Etat du véhicule : {{ vehicule.etatVehicule }}</li>
                                                    <li><i class="fa fa-check"></i>Emission : {{ vehicule.emission }}</li>
                                                    <li><i class="fa fa-check"></i>Puissance véhicule : {{ vehicule.puissance }} ch</li>
                                                    <li><i class="fa fa-check"></i>Puissance fiscale : {{ vehicule.fiscale }} cv</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <div class="car__details__tab__info__item">
                                                <ul>
                                                    <li><i class="fa fa-check"></i>Carroserie : {{ vehicule.carroserie }}</li>
                                                    <li><i class="fa fa-check"></i>Nb de portes : {{ vehicule.portes }}</li>
                                                    <li><i class="fa fa-check"></i>Nb de places : {{ vehicule.places }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="car__details__sidebar">
                    <div class="car__details__sidebar__model">
                        <ul>
                            <li>Nom : <span>{{ vehicule.translations[app.request.locale].name|default('') }}</span></li>
                            <li>Modèle : <span>{{ vehicule.modele }}</span></li>
                            <li>Marque : <span>{{ vehicule.marque.name }}</span></li>
                        </ul>
                        {% if vehicule.circulation %}
                            <p>Mise en circulation : {{ vehicule.circulation }}</p>
                        {% endif %}
                    </div>
                    <div class="car__details__sidebar__payment">
                        <ul>
                            {% if vehicule.promotion %}
                                <li>Prix <span><strike>{{ vehicule.prix }} €</strike></span></li>
                                <li>Promotion <span>{{ vehicule.promotion }} €</span></li>
                            {% else %}
                                <li>Prix <span>{{ vehicule.prix }} €</span></li>
                            {% endif %}
                        </ul>
                        <div class="center">
                            <a href="{{ path('app_contact') }}" class="bouton">Contactez-nous</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

{% endblock %}