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

{% block title %}{{ parent() }} | Series{% endblock %}

{% block body %}
    <div id="slider2" data-controller="fullscreen retourSeries intro">
        {% include('inc/icons.html.twig') %}
        {% include('inc/nav.html.twig') %}
        <div id="slider-left">

            <h1 id="slider-titre-fr" class="français">{{ categorie.titre }}</h1>
            <h1 id="slider-titre-en" class="anglais">{{ categorie.anglais }}</h1>
            {% include('inc/translate.html.twig') %}
        </div>

        <!-- Slider main container -->
        <div class="swiper" data-controller="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper" id="swiper-wrapper">
                <!-- Slides -->
                {% for photo in categorie.oeuvres %}
                <div class="swiper-slide">
                    <img srcset="{{ asset('media/photo/'~categorie.id~'/'~photo.id~'-mini.jpg') }} 600w, {{ asset('media/photo/'~categorie.id~'/'~photo.id~'.jpg') }} 1400w"
                         sizes="(max-width: 600px) 90vw, 60vw"
                         src="{{ asset('media/photo/'~categorie.id~'/'~photo.id~'.jpg') }}" alt="photo" loading="lazy">
                    <div class="swiper-lazy-preloader"></div>
                </div>
                {% endfor %}
            </div>
            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev" id="swiper-button-prev"></div>
            <div class="swiper-button-next" id="swiper-button-next"></div>
        </div>
        {% include('inc/intro/'~categorie.id~'.html.twig') %}

        {% include('inc/footer.html.twig') %}
    </div>
{% endblock %}