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

{% block title %}Recherche véhicules | Idylcar{% endblock %}

{% block body %}
    <main>
        <div class="listing-vehicule">
            <div class="container">
                <div class="title-section">
                    <div class="idv">
                        <img src="{{ asset('images/idv-idylcar.svg') }}" alt="Idv logo idylcar">
                    </div>
                    <h2>Résultat de votre recherche</h2>
                </div>
                <div class="row">
                    <div class="col-filtre">
                        <div class="filtres">
                            {% include 'vehicule/_filter.html.twig' with {form: form, typeVehicule: typeVehicule} only %}
                        </div>
                    </div>
                    <div class="col-vehicules">
                        <div class="row">
                            {% for vehicule in vehicules %}
                                <div class="col-md-4">
                                    <a href="{{ path('vehicule.show', {slug: vehicule.slug, id: vehicule.id}) }}">
                                        <div class="vehicule">
                                            <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>
                                            {% for photo in vehicule.photos|sort((a, b) => a.position <=> b.position)|slice(0, 1) %}
                                                <img src="{{ vich_uploader_asset(photo, 'imageFile') | imagine_filter('thumbVehiculeHome') }}" alt="{{ vehicule.modele }}">
                                            {% endfor %}
                                            <div class="info-vehicule">
                                                <div class="overlay"></div>
                                                <div class="content">
                                                    <h2>{{ vehicule.modele }}</h2>
                                                    {% if vehicule.typeVehicule.nom != "Caravane" and vehicule.typeVehicule.nom != "Mobil-home" and vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}
                                                        <span class="porteur">{% if vehicule.modelePorteur.marques.nom is defined %}{{ vehicule.modelePorteur.marques.nom }}{% endif %} {% if vehicule.modelePorteur.nom is defined %}{{ vehicule.modelePorteur.nom }}{% endif %} {% if vehicule.cylindree is not empty %}{{ vehicule.cylindree|replace({'.': ','}) }}L{% endif %} {% if vehicule.motorisationPorteur.nom is defined %}{{ vehicule.motorisationPorteur.nom }}{% endif %}</span>
                                                    {% endif %}
                                                    <div class="info-supp">
                                                        {% if vehicule.typeVehicule.nom != "Caravane" and vehicule.typeVehicule.nom != "Mobil-home" %}
                                                            <div>
                                                                <img src="{{ asset('images/icons/km.svg') }}" alt="Pictogramme kilomètre - Idylcar véhicules de loisirs">
                                                                <span>{{ vehicule.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>{{ vehicule.collection }}</span>
                                                        </div>
                                                        {% if vehicule.typeVehicule.nom != "Remorque" and vehicule.typeVehicule.nom != "Vélo électrique" %}
                                                            {% if vehicule.nbCouchageMaxi is not empty %}
                                                                <div>
                                                                    <img src="{{ asset('images/icons/couchage.svg') }}" alt="Pictogramme couchage - Idylcar véhicules de loisirs">
                                                                    <span>{{ vehicule.nbCouchageMaxi }}</span>
                                                                </div>
                                                            {% endif %}
                                                        {% endif %}
                                                    </div>
                                                    <div class="prix-btn">
                                                        <div class="prix-mensualite">
                                                            <span class="prix">
                                                                {% if vehicule.prixPromo is not empty %}
                                                                    {{ vehicule.prixPromo|number_format(0, ',', ' ') }} €
                                                                {% else %}
                                                                    {{ vehicule.prix|number_format(0, ',', ' ') }} €
                                                                {% endif %}
                                                            </span>
                                                        </div>
                                                        <button class="btn btn-jaune">En savoir plus</button>
                                                    </div> 
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                        <div class="navigation js-fitler-pagination">
                            {{ knp_pagination_render(vehicules) }}
                        </div>

                        <p class="info-credit">** Un crédit vous engage et doit être remboursé. Vérifiez vos capacités de remboursement avant de vous engager</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('javascripts/selectFilter.js') }}"></script>
{% endblock %}