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

{% block body %}
<article id="article">
    <section class="car spad">
        <div class="container">
            <div class="section-title">
                <h1 class="sectionTitre">Nos véhicules</h1>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <div class="car__sidebar">
                        <div class="car__search">
                            <div class="titreFiltre">Rechercher une voiture</div>
                            <form action="#">
                                <input type="text" class="quicksearch" placeholder="Search...">
                                <button type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                        <div class="car__filter">
                            <div class="titreFiltre">Filtres</div>
                            {% if marque %}
                            <div>
                                <div>Marques</div>
                                <select class="filter-select field" value-group="marque">
                                    <option value="">Tous</option>
                                    {% for marque in marques %}
                                        <option value=".marque{{ marque.id }}">{{ marque.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% endif %}
                            <div>
                                <div>Modèles</div>
                                <select class="filter-select field" value-group="modele">
                                    <option value="">Tous</option>
                                    {% for modele in modeles %}
                                        <option value=".modele{{ modele.modele }}">{{ modele.modele }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div>
                                <div>Carburant</div>
                                <select class="filter-select field" value-group="carburant">
                                    <option value="">Tous</option>
                                    <option value=".Gazole">Gazole</option>
                                    <option value=".Essence">Essence</option>
                                    <option value=".Hybride">Hybride</option>
                                    <option value=".Electrique">Electrique</option>
                                    <option value=".Autre">Autre</option>
                                </select>
                            </div>
                            <div>
                                <div>Boite</div>
                                <select class="filter-select field" value-group="boite">
                                    <option value="">Tous</option>
                                    <option value=".Automatique">Automatique</option>
                                    <option value=".Manuelle">Manuelle</option>
                                </select>
                            </div>
                            <div>
                                <div>Etat du véhicule</div>
                                <select class="filter-select field" value-group="etat">
                                    <option value="">Tous</option>
                                    <option value=".Neuf">Neuf</option>
                                    <option value=".Occasion">Occasion</option>
                                </select>
                            </div>
                            <div>
                                <div>Nb de portes</div>
                                <select class="filter-select field" value-group="porte">
                                    <option value="">Tous</option>
                                    <option value=".five">5</option>
                                    <option value=".three">3</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="car__filter__option">
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="car__filter__option__item">
                                    <div>Afficher</div>
                                    <select class="field">
                                        <option value="">9 voitures</option>
                                        <option value="">15 voitures</option>
                                        <option value="">20 voitures</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="car__filter__option__item car__filter__option__item--right">
                                    <div class="">Trier par </div>
                                    <select id="price-sort" class="field">
                                        <option data-sorttype="croissant" value="price">Price: Croissant</option>
                                        <option data-sorttype="decroissant" value="price">Price: Décroissant</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ include("pages/vehicule/index.html.twig", {'vehicules':vehicules}) }}
                </div>
            </div>
        </div>
    </section>
</article>
    <!-- Car Section End -->
{% endblock %}