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

{% block title %}Rechercher{% endblock %}

{% block content %}

<!-- section intitulé -->
<section class="mt-8">
    <!-- contianer -->
    <div class="container">
        <div class="row">
            <!-- col -->
            <div class="col-12">
                <!-- cta -->
                <div class="bg-light d-lg-flex justify-content-between align-items-center py-6 py-lg-3 px-8 text-center text-lg-start rounded">
                <!-- img -->
                    <div class="d-lg-flex align-items-center">
                        <img src="{{ asset('/assets/images/about/about-icons-1.svg') }}" alt="" class="img-fluid" />
                        <!-- text -->

                        <div class="ms-lg-4">
                            <h1 class="fs-2 mb-1">Résultat de la recherche</h1>
                            <span>
                                Tous nos catalogues, visuels et vidéos correspondant à "{{ keywords|join(', ') }}"
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- fin section intitulé -->

<!-- section affichage -->
<section class="my-lg-14 my-8">
    <!-- category -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <div class="col-12">
                <div class="mb-8">
                    <!-- heading -->
                    <h3 class="mb-0">
                    {% if catalogs|length == 0 %}
                        Désolé, il n'y a pas de parution à consulter
                    {% else %}
                        {{ catalogs|length }} parution(s) à consulter                    
                    {% endif %}                                    
                    </h3>
                </div>
            </div>
        </div>
        <!-- row -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-6">

            {% for item in catalogs %}
            <!-- col -->
            <div class="col">
                <a href="{% if (item.slug is null) %}{{ path('app_catalog_id', {id:item.id}) }}{% else %}{{ path('app_catalog_slug', {slug:item.slug}) }}{% endif %}" class="text-decoration-none text-inherit">
                <!-- card -->
                <div class="card card-product">
                    <div class="card-body text-center py-8">
                        <!-- img -->
                        <img src="{{ asset('images/men/'~item.cover.filename) }}" alt="{{ item.title }}" class="mb-3" />
                        <!-- text -->
                        <div class="text-truncate">{{ item.getlive }}</div>
                    </div>
                </div>
                </a>
            </div>                
            {% endfor %}
        </div>
    </div>
</section>
<!-- fin section affichage -->

<!-- section  latest -->
<section class="mt-8">
    <div class="container">
        <!-- row -->
        <div class="table-responsive-xl pb-6 pb-xl-0">
            <div class="row flex-nowrap">
            {% set index = 1 %}
            {% for item in latest %}
                <div class="col-12 col-xl-4 col-lg-6 position-relative">

                <div class="p-8 mb-3 rounded" style="background: url({{ asset('assets/images/banner/ad-banner-'~index~'.jpg') }}) no-repeat; background-size: cover">
                    <div>                            
                        <h3 class="mb-0 fw-bold">
                            <span class="fw-bold text-dark fs-4">
                            {% if item.title|length > 25 %}
                                {{ item.title|slice(0, 25)~"..." }}
                            {% else %}
                                {{ item.title }}
                            {% endif %}  
                            <br />
                            &nbsp;
                        </h3>
                        <div class="mt-4 mb-5 fs-5">
                            <p class="mb-0">du {{ item.dtfrom|date('d/m/Y') }}</p>
                            <span>
                            De :
                            <span class="fw-bold text-dark" style="position: relative; z-index:1;">
                            {% if item.advertiser.company|length > 30 %}
                                {{ item.advertiser.company|slice(0, 30)~"..." }}
                            {% else %}
                                {{ item.advertiser.company }}
                            {% endif %}                                    
                            </span>
                            </span>                        
                        </div>
                        <a href="{% if (item.slug is null) %}{{ path('app_catalog_id', {id:item.id}) }}{% else %}{{ path('app_catalog_slug', {slug:item.slug}) }}{% endif %}" class="btn btn-outline-success">Parcourir</a>
                    </div>
                <img 
                    src="{{ asset('images/men/'~item.cover.filename) }}" alt="{{ item.title }}" 
                    class="img-fluid rounded position-absolute"
                    style="max-height: 180px; width: auto; bottom:17px; right: 20px;z-index:0;"
                    >                             
                </div>                                              
                </div>            
                {% set index = index + 1 %}            
            {% endfor %}
            
            </div>
        </div>
    </div>
</section>

{% endblock %}