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

{% block main %}
    <div>
        <section class="occasions">
            <div class="top-part">
                <div class="title-part">
                    <div class="stars">
                        {% for i in 1..5 %}
                            <svg>
                                <use xlink:href="../assets/images/icons.svg#star"></use>
                            </svg>
                        {% endfor %}
                    </div>
                    <h1>
                        <span class="add-background">Site Premium</span>
                        <span class="bottom-title">
                        <span class="strong"> d'occasion</span> Multi-marques
                        </span>
                    </h1>
                    <div class="stars">
                        {% for i in 1..5 %}
                            <svg>
                                <use xlink:href="../assets/images/icons.svg#star"></use>
                            </svg>
                        {% endfor %}
                    </div>
                </div>
                <div class="carroussel-car">
                    <div class="cars">
                        <img src="../assets/images/cars/exposition-vehicules.png" alt="flottes de véhicules">
                    </div>
                    <div class="ground"></div>
                </div>
                <div class="filtersPart" data-controller="components--filter_occasions">
                    {% include './components/_occasion-filter.html.twig' %}
                </div>
            </div>

            <div class="container-occasions">
                <div class="all-occasions" data-controller="components--comparaisons">
                    {% for i in 1..12 %}
                        {% set carId = i %}
                        {% include './components/cards/_cars.html.twig' with carId %}
                    {% endfor %}
                    {% include './popup/_comparateur-pop-up.html.twig' %}
                </div>
                {% include './components/_pagination.html.twig' %}
            </div>

        </section>

    </div>
{% endblock %}