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

{% block title %}Résultat recherche{% endblock %}

{% block body %}
<div class="container">
    <div class="shadow-lg p-3 mb-3 bg-white rounded">
        {% if tabsArticle == null and tabsVoiture == null %}
        <h3 class="text-center my-5">Aucun résultat pour la recherche : "{{search}}"</h3>
        <div class="container">
            <h1>Oups ! Ce que vous recherchez n'existe pas !</h1>
            <p>On a surement du mal vous renseigner ! Aucun soucis, vous pouvez retourner à l'accueil ou visiter notre parc !</p>
        
            <a href="{{ path('homepage') }}" class="btn btn-primary">Retour à l'accueil</a>
            <a href="{{ path('voitures_index') }}" class="btn btn-primary">Visiter notre parc !</a>
        </div>
        {% else %}
        <h3 class="text-center my-5">Recherche : "{{search}}"</h3>
        {% endif %}
    </div>
    <div class="shadow-lg p-3 mb-5 bg-white rounded">
        {% if tabsVoiture != null %}
        <h3 class="text-center my-5">Résultat pour la catégorie voiture :</h3>
        <div class="row">
        {% for voiture in tabsVoiture %}
            {% set urlvoiture = path('voitures_show',{'slug': voiture.slug}) %}
            <div class="col-md-4 my-2">
                <div class="card border-secondary mb-3">
                    <div class="card-header text-center">
                        Prix <span>{{ voiture.prix }}&euro;</span>/TTC<br><small>En {{ voiture.etat }}</small>
                    </div>
                    <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel">
                        <div class="carousel-inner">
                            {% for image in voiture.images %}
                                <div class="carousel-item {% if loop.first %} active {% endif %}">
                                    <a href="{{ urlvoiture }}" target="_blank">
                                        <img src="/uploads/{{image.url}}" class="d-block w-100"   alt="{{ voiture.slug }}">
                                    </a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="card-body">
                        <a href="{{ urlvoiture }}" target="_blank">
                            <h4 class="card-title">{{ voiture.marque }} {{ voiture.modele }} {% if voiture.type %} {{ voiture.type }} {% endif %}</h4>
                        </a>
                        <p class="card-text">{{ voiture.Introduction | raw}}</p>
                        <a href="{{ urlvoiture }}" class="btn btn-primary" target="_blank">En savoir plus !</a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        {% if tabsArticle != null %}
        <h3 class="text-center my-5">Résultat pour la catégorie article :</h3>
        <div class="row">
                {% for article in tabsArticle %}
                {% set urlarticle = path('articles_show',{'slug': article.slug}) %}
            
                <div class="col-md-4 my-2">
                    <div class="card border-secondary mb-3">
                        <div class="card-header text-center">
                            <div class="text-left">
                                <small><em>Publié le {{ article.createdAt | date('d/m/y') }} à {{ article.createdAt | date('H:i')}}</em></small>
                            </div>
                            <br>
                            <a href="{{ urlarticle }}" target="_blank">
                                <h4 class="card-title">{{ article.titre }}</h4>
                            </a>
                        </div>
                        <div id="carouselExampleSlidesOnly" class="carousel slide carousel-fade" data-interval="3000"
                            data-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <a href="{{ urlarticle }}" target="_blank">
                                        <img src="/uploads/{{article.coverImage}}" class="d-block w-100" 
                                             alt="{{ article.slug }}">
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <span class="d-inline-block text-truncate" style="max-width: 300px;"></span>
                            <a href="{{ urlarticle }}" class="btn btn-primary" target="_blank">Lire la suite !</a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock body %}