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

{% block title %}Nos actualités | Terres de l'Yonne{% endblock %}

{% block body %} 
    <div class="fil-ariane bg-gris">
        <div class="container">
            <span><b>Vous êtes ici</b> : <a href="{{ path('index') }}">Accueil</a> | Nos actualités</span>
        </div>
    </div>

    <div class="derniere-actu-filtre p60">
        <div class="container">
            <div class="title">
                <img src="{{ asset('images/forme-titre/rouge.svg') }}" alt="Forme rouge" class="forme">
                <h1>Nos actualités</h1>
            </div>
            <div class="row">
                <div class="col-md-9 col-lg-9">
                    <div class="actu">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="carousel-actu owl-carousel">
                                    {% for photo in lastActu.photos %}
                                        <div class="item">
                                            <img src="{{ vich_uploader_asset(photo, 'imageFile') }}" class="img-border" alt="{{ lastActu.titre }}">
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h2>{{ lastActu.titre }}</h2>
                                <span>
                                    <span class="date">{{ lastActu.createdAt|date('d/m/Y') }}</span> - <span class="categorie">Catégorie</span> : {% for centre in lastActu.centres %} {{ centre.nom }} {% endfor %} | {% for categorie in lastActu.categories %}{{ categorie.nom }}{% endfor %}
                                </span>
                                <p>
                                    {{ lastActu.contenu|raw }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3">
                    {{ include ('actualite/_filtre.html.twig', {form: form}) }}
                    
                    <!--
                    <div class="filtre">
                        <span class="titre-filtre">Rechercher une actualité</span>

                        <div class="categorie">
                            <span>Par catégorie</span>
                            <ul>
                                <li>Lycée Champs <span>(10)</span></li>
                                <li>CFPPA <span>(10)</span></li>
                                <li>Lycée La Brosse <span>(11)</span></li>
                                <li>CFA <span>(10)</span></li>
                                <li>Association Sportive <span>(8)</span></li>
                                <li>Sorties <span>(9)</span></li>
                                <li>Voyages <span>(11)</span></li>
                            </ul>
                        </div>

                        <div class="mots-cles">
                            <span>Par mots clés</span>
                            <input type="text" placeholder="Rechercher dans les actus...">
                        </div>

                        <div class="dates">
                            <span>Par dates</span>
                            <input type="text" placeholder="Du" id="date1">
                            <input type="text" placeholder="Au" id="date2">
                        </div>
                    </div>
                    -->
                </div>
            </div>
        </div>
    </div>

    <div class="liste-actu p60">
        <div class="container">
            <div class="row">
                {% for actualite in actualites %}
                    <div class="col-md-4 actu">
                        <span class="date">{{ actualite.createdAt|date('d/m/Y') }}</span>
                        {% for photo in actualite.photos|slice(0, 1) %}
                            <img src="{{ vich_uploader_asset(photo, 'imageFile') }}" class="img-border" alt="{{ actualite.titre }}">
                        {% endfor %}
                        <h3>{{ actualite.titre }}</h3>
                        <p>
                            {{ actualite.contenu|striptags|slice(0, 210)|raw|nl2br }}{% if actualite.contenu|length > 210 %}[...]{% endif %}
                        </p>
                        <a href="{{ path('actuality.show', {slug: actualite.slug, id: actualite.id}) }}" class="btn {% for centre in actualite.centres %}{% if centre.nom == "CFA Agricole de l'Yonne" %}btn-orange {% elseif centre.nom == "CFPPA 89" %}btn-rouge {% elseif centre.nom == "Lycée Agricole La Brosse" %}btn-vert {% elseif centre.nom == "Lycée Professionnel de Champs-sur-Yonne" %}btn-rose {% endif %}{% endfor %}">Lire l'article</a>
                    </div>
                {% endfor %}
            </div>
            <div class="pagination">
                {{ knp_pagination_render(actualites) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        /* Bootstrap 5 JS included */
        /* vanillajs-datepicker 1.1.4 JS included */

        const getDatePickerTitle = elem => {
        // From the label or the aria-label
        const label = elem.nextElementSibling;
        let titleText = '';
        if (label && label.tagName === 'LABEL') {
            titleText = label.textContent;
        } else {
            titleText = elem.getAttribute('aria-label') || '';
        }
            return titleText;
        }

        const elems = document.querySelectorAll('.datepicker_input');
        for (const elem of elems) {
            const datepicker = new Datepicker(elem, {
                'format': 'dd/mm/yyyy', // UK format
                title: getDatePickerTitle(elem),
                language: 'fr'
            });
        }
    </script>

    <script>
        $('.carousel-actu').owlCarousel({
            loop:true,
            margin:20,
            dots: true,
            autoplay: true,
            autoplayTimeout: 5000,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                },
                1000:{
                    items:1
                }
            }
        })
    </script>
{% endblock %}