{% extends 'base.html.twig' %} 
{% block title %}Actualités{% endblock %}
{% block body %}
    <nav aria-label="breadcrumb" class="mt-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('accueil') }}">Accueil</a></li>
            <li class="breadcrumb-item" aria-current="page">Actualites</li>
        </ol>
    </nav>
    <div class="titre_actualites"> 
        <h1>Actualités</h1> 
    </div>

    {% for year, months in actualites_grouped %}
        <div class="annee">
            <h2>Année : {{ year }}</h2>
        </div>
        <div class="timeline-container">
            {% for month, articles in months %}
                {% set first_article = articles|first %}
                {% set date_obj = first_article.date %}
                <div class="timeline-month-row">
                    <div class="month-banner">
                        <h3 style="margin-left: {{ (month - 1) * (100 / 11) }}%;">
                            {{ date_obj|date('F')|capitalize }}
                        </h3>
                    </div>
                    <div class="row g-4">
                        {% for article in articles %}
                            <div class="col-md-4">
                                <div class="actualite">
                                    <img src="{{ asset(article.imgActu) }}" alt="{{ article.titreActu }}"> 
                                    <h3>{{ article.titreActu }}</h3>
                                    <div class="description">
                                        <p>{{ article.DescriptionResumerActu }}</p>
                                        <div class="date">{{ article.date|date('d/m/Y') }}</div>
                                        <a class="lien" onclick="window.location.href='{{ path('actu_exemple', {'id': article.id}) }}'" >aller sur l'article -></a>
                                    </div>
                                    <button class="toggle">
                                        <span><a onclick="window.location.href='{{ path('actu_exemple', {'id': article.id}) }}'"  >lire plus</a></span><span class="arrow">▼</span>
                                    </button>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endfor %}


    <button id="scrollToTop">
        ↑
    </button>

    <script>
        const scrollToTopButton = document.getElementById('scrollToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 200) {
                scrollToTopButton.style.display = 'block';
            } else {
                scrollToTopButton.style.display = 'none';
            }
        });

        scrollToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        document.querySelectorAll('.toggle').forEach(button => {
            button.addEventListener('click', () => {
                const container = button.closest('.actualite');
                container.classList.toggle('open');
            });
        });
    </script>

{% endblock %}