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

{% block main %}
    <div>
        <section class="comparaisons-section">
            <div class="sticky">
                <div class="title">
                    <h1 class="">Comparateur</h1>
                    <div class="cross" onclick="window.history.back()">
                        <svg>
                            <use xlink:href="../assets/images/icons.svg#cross"></use>
                        </svg>
                    </div>
                </div>
                <div class="container-car">
                    <div class="empty"></div>
                    {% for i in 1..3 %}
                        <div class="car">
                            <img src="../assets/images/v1.jpg" alt="v1" loading="lazy">
                            <p class="model">Mercedes Classe S</p>
                            <p>4.0 V8 522</p>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <article class="table-start">
                <div class="table">
                    <div class="title-col">
                        <p>Achat</p>
                        <p>Financement</p>
                    </div>
                    {% for i in 1..3 %}
                        <div class="data-col">
                            <p>139 000€</p>
                            <p>Voir en concession</p>
                        </div>
                    {% endfor %}
                </div>
            </article>

            {# Données techniques #}
            <article class="table-container">
                <h3 class="table-name">Données techniques</h3>
                <div class="table">
                    <div class="title-col">
                        <p>Année</p>
                        <p>Kilomètres</p>
                        <p>Place</p>
                        <p>Moteur</p>
                        <p>Puissance</p>
                    </div>
                    {% for i in 1..3 %}
                        <div class="data-col">
                            <p>07/2016</p>
                            <p>150 700</p>
                            <p>5</p>
                            <p>Essence</p>
                            <p>340 Ch</p>
                        </div>
                    {% endfor %}
                </div>
            </article>

            {# Informations #}
            <article class="table-container">
                <h3 class="table-name">Informations</h3>
                <div class="table">
                    <div class="title-col">
                        <p>Type de véhicule</p>
                        <p>Garantie</p>
                        <p>Première main</p>
                        <p>Kilomètre garanti</p>
                        <p>Couleur</p>
                        <p>Référence</p>
                        <p>Crit'Air</p>
                    </div>
                    {% for i in 1..3 %}
                        <div class="data-col">
                            <p>ST</p>
                            <p>oui</p>
                            <p>non</p>
                            <p>non</p>
                            <p>blanc</p>
                            <p>1234521</p>
                            <p>2</p>
                        </div>
                    {% endfor %}
                </div>
            </article>

            {# Equipements #}
            <article class="table-container">
                <h3 class="table-name">Équipements</h3>
                <div class="table">
                    <div class="title-col">
                        <p>ABS</p>
                        <p>Airbag</p>
                        <p>Bluetooth</p>
                        <p>Éclairage au sol</p>
                        <p>Fermeture centralisée</p>
                    </div>
                    {% for i in 1..3 %}
                        <div class="data-col">
                            <p>
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#check"></use>
                                </svg>
                            </p>
                            <p>
                                <svg class="missed">
                                    <use xlink:href="../assets/images/icons.svg#cross"></use>
                                </svg>
                            </p>
                            <p>
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#check"></use>
                                </svg>
                            </p>
                            <p>
                                <svg class="missed">
                                    <use xlink:href="../assets/images/icons.svg#cross"></use>
                                </svg>
                            </p>
                            <p>
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#check"></use>
                                </svg>
                            </p>
                        </div>
                    {% endfor %}
                </div>
            </article>

            {# Dimension & poid #}
            <article class="table-container">
                <h3 class="table-name">Dimension et poids</h3>
                <div class="table">
                    <div class="title-col">
                        <p>Longueur</p>
                        <p>Largeur</p>
                        <p>Hauteur</p>
                        <p>Empattement</p>
                        <p>Poids total</p>
                        <p>Charge utile</p>

                    </div>
                    {% for i in 1..3 %}
                        <div class="data-col">
                            <p>5 125 mm</p>
                            <p>1 899 mm</p>
                            <p>1 494 mm</p>
                            <p>3 035 mm</p>
                            <p>2 760 kg </p>
                            <p>2 760 kg </p>
                        </div>
                    {% endfor %}
                </div>
            </article>

            <article class="table-end">
                <div class="data-col empty">
                </div>
                {% for i in 1..3 %}
                    <div class="data-col">
                        <div class="more">
                            <a href="./page-detail-vehicule.html.twig" class="btn">En savoir <span>+</span></a>
                        </div>
                        <div class="like">
                            <a href="#" class="btn">
                                {% include '/svg/_heart-gradient-svg.html.twig' %}
                            </a>
                        </div>
                        <div class="share">
                            <a href="">
                                <svg>
                                    <use xlink:href="../assets/images/icons.svg#share"></use>
                                </svg>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </article>

        </section>

    </div>
{% endblock %}