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

{% block title %}{{ vehicule.modele }} | Idylcar{% endblock %}

{% block body %}
    <main>
        <div class="vehicule-detail {{ vehicule.typeVehicule.code|lower|lower }}">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6">
                        <div class="carousel">
                            <div class="type-offre {{ vehicule.typeOffre.name|lower }}">
                                <img src="{{ asset('images/idv-idylcar-blanc.svg') }}" alt="Idv du logo Idylcar">
                                <span>{{ vehicule.typeOffre.name }}</span>
                            </div>
                            <div class="carousel-vehicule owl-carousel">
                                {% if vehicule.photos is not empty %}
                                    {% for photo in vehicule.photos|sort((a, b) => a.position <=> b.position) %}
                                        <div class="item">
                                            {% if vehicule.concession.logoFilename %}
                                                <div class="logo">
                                                    <img src="{{ vich_uploader_asset(vehicule.concession, 'logoImageFile') }}" alt="Logo {{ vehicule.concession.nom }}">
                                                </div>
                                            {% endif %}
                                            <img src="{{ vich_uploader_asset(photo, 'imageFile') | imagine_filter('thumbVehiculeDetail') }}" alt="{{ vehicule.modele }}">
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <img src="{{ asset('images/pas-de-photo.jpg') }}" alt="Visuel avec le logo Idylcar">
                                {% endif %}
                            </div>
                            <div class="bloc-jaune"></div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <h1 class="porteur">{{ vehicule.marque.nom }} {{ vehicule.modele }}</h1>
                        <div class="trait"></div>
                        <div class="info-supp">
                            <!-- <div class="energie">
                                <img src="{{ asset('images/icons/fuel-bleu.svg') }}" alt="Pictogramme pompe à essence - Idylcar véhicules de loisirs">
                                <span></span>
                            </div> -->
                            {% if vehicule.typeVehicule.nom != "Caravane" and vehicule.typeVehicule.nom != "Mobil-home" and vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}
                                <div class="km">
                                    <img src="{{ asset('images/icons/km-bleu.svg') }}" alt="Pictogramme kilomètre - Idylcar véhicules de loisirs">
                                    <span>{{ vehicule.kilometrage|number_format(0, ',', ' ') }} km</span>
                                </div>
                            {% endif %}
                            <div class="annee">
                                <img src="{{ asset('images/icons/annee-bleu.svg') }}" alt="Pictogramme année - Idylcar véhicules de loisirs">
                                <span>{{ vehicule.collection }}</span>
                            </div>
                            {% if vehicule.nbCouchageMaxi is not empty %}
                                <div class="couchage">
                                    <img src="{{ asset('images/icons/couchage-bleu.svg') }}" alt="Pictogramme couchage - Idylcar véhicules de loisirs">
                                    <span>{{ vehicule.nbCouchageMaxi }}</span>
                                </div>
                            {% endif %}
                        </div>

                        <div class="couchage-concession">
                            <div class="type-couchage">
                                {% for couchage in vehicule.amenagementInterieur %}
                                    <div class="couchage">
                                        {% if couchage.filename %}
                                            <img src="{{ vich_uploader_asset(couchage, 'imageFile') }}" class="picto" alt="">
                                        {% endif %}
                                        <span>{{ couchage.nom }}</span>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="prix-financement">
                            <!-- <div class="financement">
                                <span class="a-partir">À partir de XXX,XX €/mois **</span>
                                <a href="" class="btn btn-jaune btn-fiancement">Simuler votre financement</a> 
                            </div> -->
                            <div class="prix">
                                {% if vehicule.prixDeBase is not empty %}
                                    <span class="prix-base">Prix de base véhicule : {{ vehicule.prixDeBase|number_format(0, ',', ' ') }} €</span>
                                {% endif %}
                                {% if vehicule.prixPromo is not empty %}
                                    <span>{{ vehicule.prixPromo|number_format(0, ',', ' ') }} €</span>
                                    <span class="prix-barre">{{ vehicule.prix|number_format(0, ',', ' ') }} €</span>
                                {% else %}
                                    <span>{{ vehicule.prix|number_format(0, ',', ' ') }} €</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="contact-concession-fiche">
                            <div class="contact">
                                <button type="button" class="btn btn-jaune" data-bs-toggle="modal" data-bs-target="#contactModal">Contacter le concessionnaire</button>
                                <div class="tel">
                                    <div class="picto">
                                        <img src="{{ asset('images/icons/telephone.svg') }}" alt="Pictogramme téléphone localisation - Idylcar véhicules de loisirs">
                                    </div>
                                    <span>{{ vehicule.concession.telephone }}</span>
                                </div>
                            </div>
                            <div class="concession-detail">
                                <div class="picto">
                                    <img src="{{ asset('images/icons/pointer-concession.svg') }}" alt="Pictogrammer pointer de position - Idylcar véhicules de loisirs">
                                </div>
                                {% if vehicule.concession.logoFilename %}
                                    <img src="{{ vich_uploader_asset(vehicule.concession, 'logoImageFile') }}" class="logo-concession" alt="Logo {{ vehicule.concession.nom }}">
                                {% endif %}
                            </div>
                        </div>

                        <!-- Vue 360° -->
                        {% if vehicule.lienVisiteVirtuelle is not empty %}
                            <a href="{{ vehicule.lienVisiteVirtuelle }}" class="btn btn-bleu visite-virtuelle" target="_blank"><img src="{{ asset('images/icons/360-blanc-jaune.svg') }}">Découvrez ce véhicule en visite virtuelle</a>
                        {% endif %}

                        <div class="marqueurs">
                            {% for marqueur in vehicule.marqueurs %}
                                <div class="marqueur {{ marqueur.code|lower }}">
                                    <span>{{ marqueur.nom }}</span>
                                </div>
                            {% endfor %}
                        </div>

                        <a href="#info-supp" class="btn btn-bleu btn-info-vehicule">Voir plus d'informations</a>
                    </div>
                </div>
                
                <!-- Général / Cellule / Porteur / Options -->
                <div class="general-cellule-porteur-options">
                    <div class="row justify-content-center">
                        <div class="col-lg-3 general">
                            <div class="info-technique">
                                <h2>Général</h2>
                                <div class="trait"></div>
                                <div class="info">
                                    <span>Type de véhicule : <b>{{ vehicule.typeVehicule.nom }}</b></span>
                                    {% if vehicule.categorie.nom is defined %}
                                        <span>Gamme : <b>{{ vehicule.categorie.nom }}</b></span>
                                    {% endif %}
                                    <span>Marque : <b>{{ vehicule.marque.nom }}</b></span>
                                    <span>Modèle : <b>{{ vehicule.modele }}</b></span>
                                    <div class="space"></div>
                                    {% if vehicule.nbPlaceCarteGrise is not empty %}
                                        <span>Aménagement : 
                                            {% for amenagement in vehicule.amenagementInterieur %}
                                                <b>{{ amenagement.nom }}</b>
                                            {% endfor %}
                                        </span>
                                    {% endif %}
                                    {% if vehicule.nbPlaceCarteGrise is not empty %}
                                        <span>Place(s) carte grise : <b>{{ vehicule.nbPlaceCarteGrise }}</b></span>
                                    {% endif %}
                                    {% if vehicule.collection is not empty %}
                                        <span>Collection : <b>{{ vehicule.collection }}</b></span>
                                    {% endif %}
                                    {% if vehicule.longueur is not empty %}
                                        <span>Longueur : <b>{{ vehicule.longueur }} m</b></span>
                                    {% endif %}
                                    {% if vehicule.largeur is not empty %}
                                        <span>Largeur : <b>{{ vehicule.largeur }} m</b></span>
                                    {% endif %}
                                    {% if vehicule.hauteur is not empty %}
                                        <span>Hauteur : <b>{{ vehicule.hauteur }} m</b></span>
                                    {% endif %}
                                    {% if vehicule.PVOM is not empty %}
                                        <span>PVOM : <b>{{ vehicule.PVOM }} kg</b></span>
                                    {% endif %}
                                    {% if vehicule.PTAC is not empty %}
                                        <span>PTAC : <b>{{ vehicule.PTAC }} kg</b></span>
                                    {% endif %}
                                    {% if vehicule.chargeUtile is not empty %}
                                        <span>Charge utile : <b>{{ vehicule.chargeUtile }} kg</b></span>
                                    {% endif %}
                                    <div class="space"></div>
                                    {% if vehicule.garantie is not empty %}
                                        <span>Garantie : <b>{{ vehicule.garantie }} mois</b></span>
                                    {% endif %}
                                    <div class="space"></div>
                                    <span class="donnee-constructeur">*Données constructeur non contractuelles</span>
                                </div>
                            </div>
                        </div>

                        {% set cellule = false %}
                        {% set porteur = false %}
                        {% set options = false %}
                        {% for value in vehicule.caracteristiquesValue %}
                            {% if value.caracteristiques.liste.nom == 'Cellule' %}
                                {% if value.value != "false" and value.value != "" %}
                                    {% set cellule = true %}
                                {% endif %}
                            {% endif %}
                            {% if value.caracteristiques.liste.nom == 'Options' %}
                                {% if value.value != "false" and value.value != "" %}
                                    {% set options = true %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}

                        {% if vehicule.typeVehicule.nom == "Camping-car" or vehicule.typeVehicule.nom == "Fourgon" or vehicule.typeVehicule.nom == "Van" %}
                            {% set porteur = true %}
                        {% endif %}

                        {% if cellule == true %}
                            <div class="col-lg-3 cellule">
                                <div class="info-technique">
                                    <h2>Cellule</h2>
                                    <div class="trait"></div>
                                    <div class="info">
                                        {% for value in vehicule.caracteristiquesValue %}
                                            {% if value.caracteristiques.liste.nom == 'Cellule' %}
                                                {% if value.value != "false" and value.value != "" %}<span>{{ value.caracteristiques.nom }} : <b>{% if value.value == "true" %}Oui{% else %}{{ value.value }} {{ value.caracteristiques.unite }}{% endif %}</b></span>{% endif %}
                                            {% endif %}
                                        {% endfor %}
                                        <div class="space"></div>
                                        <span class="donnee-constructeur">*Données constructeur non contractuelles</span>
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        {% if porteur == true %}
                            <div class="col-lg-3 porteur-info">
                                <div class="info-technique">
                                    <h2>Porteur</h2>
                                    <div class="trait"></div>
                                    <div class="info">
                                        {% if vehicule.modelePorteur.marques.nom is defined %}
                                            <span>Marque porteur : <b>{{ vehicule.modelePorteur.marques.nom }}</b></span>
                                        {% endif %}
                                        {% if vehicule.modelePorteur.nom is defined %}
                                            <span>Modèle porteur : <b>{{ vehicule.modelePorteur.nom }}</b></span>
                                        {% endif %}
                                        {% if vehicule.cylindree is not empty %}
                                            <span>Cylindrée : <b>{{ vehicule.cylindree }} L</b></span>
                                        {% endif %}
                                        {% if vehicule.motorisationPorteur.nom is defined %}
                                            <span>Motorisation : <b>{{ vehicule.motorisationPorteur.nom }}</b></span>
                                        {% endif %}
                                        {% if vehicule.energiePorteur.nom is defined %}
                                            <span>Énergie : <b>{{ vehicule.energiePorteur.nom }}</b></span>
                                        {% endif %}
                                        <span>Puissance DIN : <b>{{ vehicule.puissanceDin }} ch</b></span>
                                        <span>Puissance Fiscale : <b>{{ vehicule.puissanceFiscale }} cv</b></span>
                                        <div class="space"></div>
                                        {% for value in vehicule.caracteristiquesValue %}
                                            {% if value.caracteristiques.liste.nom == 'Porteur' %}
                                                {% if value.value != "false" and value.value != "" %}<span>{{ value.caracteristiques.nom }} : <b>{% if value.value == "true" %}Oui{% else %}{{ value.value }} {{ value.caracteristiques.unite }}{% endif %}</b></span>{% endif %}
                                            {% endif %}
                                        {% endfor %}
                                        <div class="space"></div>
                                        <span class="donnee-constructeur">*Données constructeur non contractuelles</span>
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        {% if options == true %}
                            <div class="col-lg-3 options">
                                <div class="info-technique">
                                    <h2>Options</h2>
                                    <div class="trait"></div>
                                    <div class="info">
                                        {% for value in vehicule.caracteristiquesValue %}
                                            {% if value.caracteristiques.liste.nom == 'Options' %}
                                                {% if value.value != "false" and value.value != "" %}
                                                    <span>{{ value.caracteristiques.nom }} : <b>{% if value.value == "true" %}Oui{% else %}{{ value.value }} {{ value.caracteristiques.unite }}{% endif %}</b></span>
                                                {% endif %}
                                            {% endif %}
                                        {% endfor %}
                                        <div class="space"></div>
                                        <span class="donnee-constructeur">*Données constructeur non contractuelles</span>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Informaitons complémentaires -->
            <div class="informations-complementaires" id="info-supp">
                <div class="container">
                    <div class="title-section">
                        <div class="idv">
                            <img src="{{ asset('images/idv-idylcar.svg') }}" alt="Idv logo idylcar">
                        </div>
                        <h2>
                            Informations <span class="jaune">complémentaires</span>
                        </h2>
                    </div>
                    <p>
                        {{ vehicule.texteVehicule|raw }}
                    </p>
                </div>
            </div>

            <!-- Où trouver ce véhicule -->
            <div class="trouver-vehicule">
                <div class="container">
                    <div class="title-section">
                        <div class="idv">
                            <img src="{{ asset('images/idv-idylcar.svg') }}" alt="Idv logo idylcar">
                        </div>
                        <h2>
                            Où trouver <span class="jaune">ce véhicule ?</span>
                        </h2>
                    </div>
                    <div class="row">
                        <div class="col-lg-5">
                            {% if vehicule.concession.filename %}
                                <img src="{{ vich_uploader_asset(vehicule.concession, 'imageFile') }}" class="picto" alt="{{ vehicule.concession.nom }}">
                            {% endif %}
                        </div>
                        <div class="col-lg-7">
                            <div class="logo-concession">
                                {% if vehicule.concession.logoFilename %}
                                    <img src="{{ vich_uploader_asset(vehicule.concession, 'logoImageFile') }}" alt="Logo {{ vehicule.concession.nom }}">
                                {% endif %}
                            </div>
                            <div class="adresse">
                                <div class="picto">
                                    <img src="{{ asset('images/icons/pointer.svg') }}" alt="Pictogramme pointer localisation - Idylcar véhicules de loisirs">
                                </div>
                                <span>{{ vehicule.concession.adresse|raw }} {{ vehicule.concession.codePostal }} {{ vehicule.concession.ville }}</span>
                            </div>
                            <div class="tel">
                                <div class="picto">
                                    <img src="{{ asset('images/icons/telephone.svg') }}" alt="Pictogramme téléphone localisation - Idylcar véhicules de loisirs">
                                </div>
                                <span>{{ vehicule.concession.telephone }}</span>
                            </div>
                            <div class="siret-orias">
                                {% if vehicule.concession.siret is not empty %}
                                    <div class="siret">
                                        <div class="picto">
                                            <img src="{{ asset('images/icons/siret.svg') }}" alt="Pictogramme siret localisation - Idylcar véhicules de loisirs">
                                        </div>
                                        <span><span>Siret :</span> {{ vehicule.concession.siret }}</span>
                                    </div>
                                {% endif %}
                                {% if vehicule.concession.orias is not empty %}
                                    <div class="orias">
                                        <span><span>Orias :</span> {{ vehicule.concession.orias }}</span>
                                    </div>
                                {% endif %}
                            </div>
                            <div class="horaire">
                                <div class="picto">
                                    <img src="{{ asset('images/icons/horaire.svg') }}" alt="Pictogramme horaire localisation - Idylcar véhicules de loisirs">
                                </div>
                                <span>{{ vehicule.concession.horaire|raw }}</span>
                            </div>
                            <button type="button" class="btn btn-jaune" data-bs-toggle="modal" data-bs-target="#contactModal">Contacter le concessionnaire</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Véhicules simulaires -->
            <div class="vehicules-similaires">
                <div class="container">
                    <div class="title-section">
                        <div class="idv">
                            <img src="{{ asset('images/idv-idylcar.svg') }}" alt="Idv logo idylcar">
                        </div>
                        <h2>
                            Véhicules <span class="jaune">similaires</span>
                        </h2>
                    </div>
                    <div class="row">
                        {% if vehiculeRandom1 is not empty %}
                            <div class="col-md-4">
                                <a href="{{ path('vehicule.show', {slug: vehiculeRandom1.slug, id: vehiculeRandom1.id}) }}">
                                    <div class="vehicule">
                                        <div class="type-offre {{ vehiculeRandom1.typeOffre.name|lower }}">
                                            <img src="{{ asset('images/idv-idylcar-blanc.svg') }}" alt="Idv du logo Idylcar">
                                            <span>{{ vehiculeRandom1.typeOffre.name }}</span>
                                        </div>
                                        {% for photo in vehiculeRandom1.photos|sort((a, b) => a.position <=> b.position)|slice(0, 1) %}
                                            <img src="{{ vich_uploader_asset(photo, 'imageFile') | imagine_filter('thumbVehiculeHome') }}" alt="{{ vehiculeRandom1.modele }}">
                                        {% endfor %}
                                        <div class="info-vehicule">
                                            <div class="overlay"></div>
                                            <div class="content">
                                                <h3>{{ vehiculeRandom1.modele }}</h3>
                                                {% if vehiculeRandom1.typeVehicule.nom != "Caravane" and vehiculeRandom1.typeVehicule.nom != "Mobil-home" and vehiculeRandom1.typeVehicule.nom != "Remorque" and vehiculeRandom1.typeVehicule.nom != "Vélo électrique" %}
                                                    <span class="porteur">{% if vehiculeRandom1.modelePorteur.marques.nom is defined %}{{ vehiculeRandom1.modelePorteur.marques.nom }}{% endif %} {% if vehiculeRandom1.modelePorteur.nom is defined %}{{ vehiculeRandom1.modelePorteur.nom }}{% endif %} {{ vehiculeRandom1.cylindree|replace({'.': ','}) }}L {% if vehiculeRandom1.motorisationPorteur.nom is defined %}{{ vehiculeRandom1.motorisationPorteur.nom }}{% endif %}</span>
                                                {% endif %}
                                                <div class="info-supp">
                                                    {% if vehiculeRandom1.typeVehicule.nom != "Caravane" and vehiculeRandom1.typeVehicule.nom != "Mobil-home" and vehiculeRandom1.typeVehicule.nom != "Remorque" and vehiculeRandom1.typeVehicule.nom != "Vélo électrique" %}    
                                                        <div>
                                                            <img src="{{ asset('images/icons/km.svg') }}" alt="Pictogramme kilomètre - Idylcar véhicules de loisirs">
                                                            <span>{{ vehiculeRandom1.kilometrage|number_format(0, ',', ' ') }} km</span>
                                                        </div>
                                                    {% endif %}
                                                    <div>
                                                        <img src="{{ asset('images/icons/annee.svg') }}" alt="Pictogramme année - Idylcar véhicules de loisirs">
                                                        <span>{{ vehiculeRandom1.collection }}</span>
                                                    </div>

                                                    {% if vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}
                                                        <div>
                                                            <img src="{{ asset('images/icons/couchage.svg') }}" alt="Pictogramme couchage - Idylcar véhicules de loisirs">
                                                            <span>{{ vehiculeRandom1.nbCouchageMaxi }}</span>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="prix-btn">
                                                    <div class="prix-mensualite">
                                                        <span class="prix">{% if vehiculeRandom1.prixPromo is not empty %}{{ vehiculeRandom1.prixPromo|number_format(0, ',', ' ') }} €{% else %}{{ vehiculeRandom1.prix|number_format(0, ',', ' ') }} €{% endif %}</span>
                                                    </div>
                                                    <button class="btn btn-jaune">En savoir plus</button>
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        {% endif %}

                        {% if vehiculeRandom2 is not empty %}
                            <div class="col-md-4">
                                <a href="{{ path('vehicule.show', {slug: vehiculeRandom2.slug, id: vehiculeRandom2.id}) }}">
                                    <div class="vehicule">
                                        <div class="type-offre {{ vehiculeRandom2.typeOffre.name|lower }}">
                                            <img src="{{ asset('images/idv-idylcar-blanc.svg') }}" alt="Idv du logo Idylcar">
                                            <span>{{ vehiculeRandom2.typeOffre.name }}</span>
                                        </div>
                                        {% for photo in vehiculeRandom2.photos|sort((a, b) => a.position <=> b.position)|slice(0, 1) %}
                                            <img src="{{ vich_uploader_asset(photo, 'imageFile') | imagine_filter('thumbVehiculeHome') }}" alt="{{ vehiculeRandom2.modele }}">
                                        {% endfor %}
                                        <div class="info-vehicule">
                                            <div class="overlay"></div>
                                            <div class="content">
                                                <h3>{{ vehiculeRandom2.modele }}</h3>
                                                {% if vehiculeRandom2.typeVehicule.nom != "Caravane" and vehiculeRandom2.typeVehicule.nom != "Mobil-home" and vehiculeRandom2.typeVehicule.nom != "Remorque" and vehiculeRandom2.typeVehicule.nom != "Vélo électrique" %}
                                                    <span class="porteur">{% if vehiculeRandom2.modelePorteur.marques.nom is defined %}{{ vehiculeRandom2.modelePorteur.marques.nom }}{% endif %} {% if vehiculeRandom2.modelePorteur.nom is defined %}{{ vehiculeRandom2.modelePorteur.nom }}{% endif %} {{ vehiculeRandom2.cylindree|replace({'.': ','}) }}L {% if vehiculeRandom2.motorisationPorteur.nom is defined %}{{ vehiculeRandom2.motorisationPorteur.nom }}{% endif %}</span>
                                                {% endif %}
                                                <div class="info-supp">
                                                    {% if vehicule.typeVehicule.nom != "Caravane" and vehicule.typeVehicule.nom != "Mobil-home" and vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}    
                                                        <div>
                                                            <img src="{{ asset('images/icons/km.svg') }}" alt="Pictogramme kilomètre - Idylcar véhicules de loisirs">
                                                            <span>{{ vehiculeRandom2.kilometrage|number_format(0, ',', ' ') }} km</span>
                                                        </div>
                                                    {% endif %}
                                                    <div>
                                                        <img src="{{ asset('images/icons/annee.svg') }}" alt="Pictogramme année - Idylcar véhicules de loisirs">
                                                        <span>{{ vehiculeRandom2.collection }}</span>
                                                    </div>

                                                    {% if vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}
                                                        <div>
                                                            <img src="{{ asset('images/icons/couchage.svg') }}" alt="Pictogramme couchage - Idylcar véhicules de loisirs">
                                                            <span>{{ vehiculeRandom2.nbCouchageMaxi }}</span>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="prix-btn">
                                                    <div class="prix-mensualite">
                                                        <span class="prix">{% if vehiculeRandom2.prixPromo is not empty %}{{ vehiculeRandom2.prixPromo|number_format(0, ',', ' ') }} €{% else %}{{ vehiculeRandom2.prix|number_format(0, ',', ' ') }} €{% endif %}</span>
                                                    </div>
                                                    <button class="btn btn-jaune">En savoir plus</button>
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        {% endif %}
                        
                        {% if vehiculeRandom3 is not empty %}
                            <div class="col-md-4">
                                <a href="{{ path('vehicule.show', {slug: vehiculeRandom3.slug, id: vehiculeRandom3.id}) }}">
                                    <div class="vehicule">
                                        <div class="type-offre {{ vehiculeRandom3.typeOffre.name|lower }}">
                                            <img src="{{ asset('images/idv-idylcar-blanc.svg') }}" alt="Idv du logo Idylcar">
                                            <span>{{ vehiculeRandom3.typeOffre.name }}</span>
                                        </div>
                                        {% for photo in vehiculeRandom3.photos|sort((a, b) => a.position <=> b.position)|slice(0, 1) %}
                                            <img src="{{ vich_uploader_asset(photo, 'imageFile') | imagine_filter('thumbVehiculeHome') }}" alt="{{ vehiculeRandom3.modele }}">
                                        {% endfor %}
                                        <div class="info-vehicule">
                                            <div class="overlay"></div>
                                            <div class="content">
                                                <h3>{{ vehiculeRandom3.modele }}</h3>
                                                {% if vehiculeRandom3.typeVehicule.nom != "Caravane" and vehiculeRandom3.typeVehicule.nom != "Mobil-home" and vehiculeRandom3.typeVehicule.nom != "Remorque" and vehiculeRandom3.typeVehicule.nom != "Vélo électrique" %}
                                                    <span class="porteur">{% if vehiculeRandom3.modelePorteur.marques.nom is defined %}{{ vehiculeRandom3.modelePorteur.marques.nom }}{% endif %} {% if vehiculeRandom3.modelePorteur.nom is defined %}{{ vehiculeRandom3.modelePorteur.nom }}{% endif %} {{ vehiculeRandom3.cylindree|replace({'.': ','}) }}L {% if vehiculeRandom3.motorisationPorteur.nom is defined %}{{ vehiculeRandom3.motorisationPorteur.nom }}{% endif %}</span>
                                                {% endif %}
                                                <div class="info-supp">
                                                    {% if vehiculeRandom3.typeVehicule.nom != "Caravane" and vehiculeRandom3.typeVehicule.nom != "Mobil-home" and vehiculeRandom3.typeVehicule.nom != "Remorque" and vehiculeRandom3.typeVehicule.nom != "Vélo électrique" %}    
                                                        <div>
                                                            <img src="{{ asset('images/icons/km.svg') }}" alt="Pictogramme kilomètre - Idylcar véhicules de loisirs">
                                                            <span>{{ vehiculeRandom3.kilometrage|number_format(0, ',', ' ') }} km</span>
                                                        </div>
                                                    {% endif %}
                                                    <div>
                                                        <img src="{{ asset('images/icons/annee.svg') }}" alt="Pictogramme année - Idylcar véhicules de loisirs">
                                                        <span>{{ vehiculeRandom3.collection }}</span>
                                                    </div>
                                                    {% if vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}
                                                        <div>
                                                            <img src="{{ asset('images/icons/couchage.svg') }}" alt="Pictogramme couchage - Idylcar véhicules de loisirs">
                                                            <span>{{ vehiculeRandom3.nbCouchageMaxi }}</span>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="prix-btn">
                                                    <div class="prix-mensualite">
                                                        <span class="prix">{% if vehiculeRandom3.prixPromo is not empty %}{{ vehiculeRandom3.prixPromo|number_format(0, ',', ' ') }} €{% else %}{{ vehiculeRandom3.prix|number_format(0, ',', ' ') }} €{% endif %}</span>
                                                    </div>
                                                    <button class="btn btn-jaune">En savoir plus</button>
                                                </div> 
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Contacter le concessionnaire</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="contactForm" class="contact-vendeur">
                        {{ form_start(form) }}
                            <div class="row">
                                <div class="row">
                                    <div class="col">{{ form_row(form.firstname) }}</div>
                                    <div class="col">{{ form_row(form.lastname) }}</div>
                                </div>
                                <div class="row">
                                    <div class="col">{{ form_row(form.phone) }}</div>
                                    <div class="col">{{ form_row(form.email) }}</div>
                                </div>
                                <div class="col">{{ form_row(form.message) }}</div>
                                
                                <button type="submit" class="btn btn-jaune">Envoyer</button>
                            </div>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('owlcarousel/owl.carousel.min.js') }}"></script>

    <script>
        $('.carousel-vehicule').owlCarousel({
            loop:true,
            margin:10,
            responsiveClass:true,
            navText: ["<img src='{{ asset('images/icons/prev.svg') }}'>","<img src='{{ asset('images/icons/next.svg') }}'>"],
            responsive:{
                0:{
                    items:1,
                    nav:true
                },
                600:{
                    items:1,
                    nav:false
                },
                1000:{
                    items:1,
                    nav:true,
                    loop:false,
                    dots: true
                }
            }
        })
    </script>
{% endblock %}