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

{% block title %}{{ catalog.title }}{% endblock %}

{% block content %}

<!-- section breadcrumb-->
<div class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- breadcrumb -->
                <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ path('app_home') }}">Accueil</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('app_catalog') }}">Les Parutions</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ catalog.title|title }}</li>
                </ol>
                </nav>
            </div>
        </div>
    </div>
</div>
<!-- end section breadcrumb-->

<!-- section -->
<section class="my-lg-14 my-8">
    <div class="container-lg">

            <div class="ratio ratio-16x9 w-100">
                <iframe src="{{ catalog.link }}" title="{{ catalog.title }}" allowfullscreen></iframe>
            </div>    
 
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <!-- text -->
                <div class="mb-5">
                <div class="mb-3 text-center"><a href="{% if catalog.advertiser.slug == null %}{{ path('app_advertiser_catalogs_id', {id:catalog.advertiser.id}) }}{% else %}{{ path('app_advertiser_catalogs_slug', {slug:catalog.advertiser.slug}) }}{% endif %}">{{ catalog.advertiser.company }}</a></div>
                <h1 class="fw-bold text-center">{{ catalog.title }}</h1>
                    <div class="d-flex justify-content-center text-muted mt-4">
                        <span class="me-2">Valable jusqu'au <small>{{ catalog.dtto|date('d/m/Y') }}</small></span>
                        <span>
                            <small>
                                Mot clefs :
                                <span class="text-dark fw-bold">{{ catalog.keywords|upper }}</span>
                            </small>
                        </span>
                    </div>
                </div>

                <hr class="mt-8 mb-5" />

            </div>
        </div>
    </div>
</section>


<!-- 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 %}