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

{% block main %}
    <div>
        <section class="section-detail" data-controller="components--single_car">
            <div class="container-detail">
                <div class="container-visual-car">
                    <div class="img-principal">
                        {% for e in 0..10 %}
                            {% set img_number = e %}
                            {% if e >= 3 %}
                                {% set img_number = 3 %}
                            {% endif %}
                            {% if e == 0 %}
                                <a href="../assets/images/v{{ img_number }}.jpg" class="slider-img-car"
                                   slide-id="{{ img_number }}">
                                    <img src="../assets/images/v{{ img_number }}.jpg" alt="v1" loading="lazy">
                                </a>
                            {% else %}
                                <a href="../assets/images/v{{ img_number }}.jpg" class="slider-img-car hidden"
                                   slide-id="{{ img_number }}">
                                    <img src="../assets/images/v{{ img_number }}.jpg" alt="v1" loading="lazy"
                                    >
                                </a>
                            {% endif %}
                        {% endfor %}

                        <div class="like">
                            {% include './svg/_heart-gradient-svg.html.twig' %}
                        </div>
                    </div>
                    <div class="swiper" data-controller="detail_car_thumbnail_slider_controller">
                        <div class="swiper-wrapper">
                            {% for i in 0..10 %}
                                {% set slideId = i %}
                                {% if i >= 3 %}
                                    {% set slideId = 3 %}
                                {% endif %}
                                <div class="swiper-slide">
                                    <img src="../assets/images/v{{ slideId }}.jpg" alt="v1" loading="lazy"
                                         slide-id="{{ slideId }}"
                                         data-action="click->components--single_car#changeImage">
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="dataPrincipal">
                    <div class="title-car">
                        <h1>Porsche Carrera GT</h1>
                        <p>5.7 V10 612</p>
                    </div>

                    <div class="price-part">
                        <div class="container-priceInfo">
                            <div class="price-info">
                                <div class="financement">
                                    <h2>Financement</h2>
                                    <p>
                                        Dès
                                        <span class="price">325 €</span>
                                        /mois
                                        {% include './components/_information.html.twig' with {'info': 'en attente'}  %}
                                    </p>
                                </div>
                                <div class="achat">
                                    <h2>Achat</h2>
                                    <p class="priceAchat">35 950 €{% include './components/_information.html.twig' with {'info': 'hors frais immatriculation et forfait livraison'}  %}</p>
                                </div>
                            </div>
                            <div class="action-btn">
                                <a href="./page-reserve.html" class="btn-primary">Je réserve</a>
                                <a href="./page-faire-une-offre.html" class="btn-primary">Je fais une offre</a>
                            </div>
                        </div>
                        <div class="container-form-contact">
                            <div>
                                <button class="btn-action" data-action="click->components--single_car#openPopUp">
                                    <svg>
                                        <use xlink:href="../assets/images/icons.svg#phone"></use>
                                    </svg>
                                    Être </br>rappelé
                                </button>
                                <div class="pop-up-rappel pop-up">
                                    <div class="content-form">
                                        <div class="title">
                                            <h3>Demander plus d'information sur le véhicule</h3>
                                            <button class="close"
                                                    data-action="click->components--single_car#closePopUp">
                                                <svg>
                                                    <use xlink:href="../assets/images/icons.svg#cross"></use>
                                                </svg>
                                            </button>
                                        </div>
                                        <form action="">
                                            <div class="form-group">
                                                <input type="text" name="prenom" placeholder="Prénom*" required>
                                                <input type="text" name="nom" placeholder="Nom*" required>
                                                <input type="text" name="téléphone" placeholder="Téléphone*" required>
                                                <input type="mail" name="mail" placeholder="Mail*" required>
                                            </div>
                                            <textarea name="message" id="message" rows="5">Bonjour, je souhaiterais qu’un conseiller me rappelle pour avoir plus d’information sur le véhicule suivant : Mercedes-Benz Classe C Break comprenant la référence : ******. Merci
                                            </textarea>
                                            <p class="text mt-0 little w-100">* champs obligatoires</p>
                                            <div class="checkbox">
                                                <input type="checkbox" id="rgpd" name="accepter" required>
                                                <label for="rgpd" class="rgpd">Ce site est protégé par reCAPTCHA. La
                                                    politique
                                                    de
                                                    confidentialité
                                                    et les conditions d'utilisation de Google s'appliquent. En
                                                    soumettant ce
                                                    formulaire, j'accepte que les informations saisies soient utilisées
                                                    dans
                                                    le
                                                    cadre de ma demande et de la relation commerciale qui peut en
                                                    découler
                                                    avec
                                                    Like
                                                    auto, conformément à la politique de confidentialité du
                                                    site.</label>
                                            </div>

                                            <button type="submit">Envoyer</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <button class="btn-action" data-action="click->components--single_car#openPopUp">
                                    <svg>
                                        <use xlink:href="../assets/images/icons.svg#mail"></use>
                                    </svg>
                                    Envoyer </br>un mail
                                </button>
                                <div class="pop-up">
                                    <div class="content-form">
                                        <div class="title">
                                            <h3>Demander plus d'information sur le véhicule</h3>
                                            <button class="close"
                                                    data-action="click->components--single_car#closePopUp">
                                                <svg>
                                                    <use xlink:href="../assets/images/icons.svg#cross"></use>
                                                </svg>
                                            </button>
                                        </div>
                                        <form action="">
                                            <div class="form-group">
                                                <input type="text" name="prenom" placeholder="Prénom*" required>
                                                <input type="text" name="nom" placeholder="Nom*" required>
                                                <input type="text" name="mail" placeholder="Mail*" required>
                                            </div>
                                            <textarea name="message" id="message" rows="5">référence du véhicule : ******</textarea>
                                            <p class="text mt-0 little w-100">* champs obligatoires</p>
                                            <div class="checkbox">
                                                <input type="checkbox" id="rgpd2" name="accepter" required>
                                                <label for="rgpd2" class="rgpd">Ce site est protégé par reCAPTCHA. La
                                                    politique
                                                    de
                                                    confidentialité
                                                    et les conditions d'utilisation de Google s'appliquent. En
                                                    soumettant ce
                                                    formulaire, j'accepte que les informations saisies soient utilisées
                                                    dans
                                                    le
                                                    cadre de ma demande et de la relation commerciale qui peut en
                                                    découler
                                                    avec
                                                    Like
                                                    auto, conformément à la politique de confidentialité du
                                                    site.</label>
                                            </div>

                                            <button type="submit">Envoyer</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <button class="btn-action"
                                        onclick="window.location.href = '/page-estimation-vehicule.html'">
                                    <svg>
                                        <use xlink:href="../assets/images/icons.svg#calculette"></use>
                                    </svg>
                                    Estimer </br>mon véhicule
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="characteristic">
                        <h2>Caractéristiques</h2>
                        <div class="containerItems">
                            <div class="item">
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#compteur"></use>
                                </svg>
                                <p>115 000 km {% include './components/_information.html.twig' with {'info': 'Like Auto ne peut garantir le kilométrage compteur. Contacte-nous pour en savoir plus'}  %}</p>
                            </div>
                            <div class="item">
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#calendar"></use>
                                </svg>
                                <p>mai 2019</p>
                            </div>
                            <div class="item">
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#dotMap"></use>
                                </svg>
                                <p>Perpignan</p>
                            </div>
                            <div class="item">
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#levierVitesse"></use>
                                </svg>
                                <p>Automatique</p>
                            </div>
                            <div class="item">
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#thunder"></use>
                                </svg>
                                <p>Essence</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="container-cars-info">
                    <article class="car-info equipment">
                        <div class="title" data-action="click->components--single_car#toggleActive">
                            <h3>Équipements</h3>
                            <svg>
                                <use xlink:href="../assets/images/icons.svg#arrow"></use>
                            </svg>
                        </div>
                        <div class="content-data">
                            <ul>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores doloresdolores dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                                <li>lorem ipsum dolores</li>
                            </ul>
                        </div>
                    </article>
                    <article class="car-info">
                        <div class="title" data-action="click->components--single_car#toggleActive">
                            <h3>Informations</h3>
                            <svg>
                                <use xlink:href="../assets/images/icons.svg#arrow"></use>
                            </svg>

                        </div>
                        <div class="content-data">
                            <ul>
                                <li><p>Garantie</p>
                                    <p>12 Mois</p></li>
                                <li><p>Première main</p>
                                    <p>Non</p></li>
                                <li><p>Couleur extérieure</p>
                                    <p>Argent</p></li>
                                <li><p>Référence</p>
                                    <p>PR206644</p></li>
                                <li><p>sCrit'Air</p>
                                    <p>2</p></li>
                            </ul>
                        </div>

                    </article>
                    <article class="car-info">
                        <div class="title" data-action="click->components--single_car#toggleActive">
                            <h3>Fiche technique</h3>
                            <svg>
                                <use xlink:href="../assets/images/icons.svg#arrow"></use>
                            </svg>

                        </div>
                        <div class="content-data">
                            <ul>
                                <li class="sub-title"><p>Données techniques</p></li>
                                <li><p>Puissance</p>
                                    <p>253 CH</p></li>
                                <li><p>Puissance fiscale</p>
                                    <p>15 CV</p></li>
                                <li><p>Cylindrée</p>
                                    <p>1969 cm3</p></li>
                                <li><p>Boîte de vitesse</p>
                                    <p>Auto séquent.</p></li>
                                <li><p>Nombre de places</p>
                                    <p>5</p></li>
                                <li><p>Nombre de portes</p>
                                    <p>5</p></li>
                                <li><p>Émission de CO2</p>
                                    <p>54g / km</p></li>
                                <li class="sub-title"><p>Dimensions et poids</p></li>
                                <li><p>Longueur</p>
                                    <p>4688 mm</p></li>
                                <li><p>Largeur</p>
                                    <p>1902 mm</p></li>
                                <li><p>Hauteur</p>
                                    <p>1658 mm</p></li>
                                <li><p>Empattement</p>
                                    <p>non renseigné</p></li>
                                <li><p>Nombre de places</p>
                                    <p>5</p></li>
                                <li><p>Poids Total</p>
                                    <p>2094 kg</p></li>
                                <li><p>Charge utile</p>
                                    <p>54 kg</p></li>
                            </ul>
                        </div>

                    </article>

                </div>
            </div>
        </section>
    </div>
{% endblock %}