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

{% block title %}Recherche 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 liste-actu 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">
                            {% for actualite in actualites %}
                                <div class="col-md-6 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') }}" 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 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>
                <div class="col-md-3 col-lg-3">
                    {{ include ('actualite/_filtre.html.twig', {form: form}) }}
                </div>
            </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>
{% endblock %}