{% extends 'base.html.twig' %} 
{% block title %}Accueil{% endblock %}
{% block body %}
    <nav aria-label="breadcrumb" class="mt-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item" aria-current="page">Accueil</li>
        </ol>
    </nav>
    <div class="titre_accueil">
        <h1> Accueil </h1>
    </div>
    <div class="presentation_accueil">
        <h2> Présentation : <label>Numeric Formation</label> </h2>

        <p>Sur ce site, nous vous présentons des formations nouvelles et uniques, pensées pour répondre aux exigences actuelles du développement web. <br>Chaque module a été conçu pour allier clarté, efficacité et mise en pratique directe, autour de thématiques essentielles telles que le front-end, le back-end, l’architecture logicielle, ou encore les bonnes pratiques DevOps.</p>

        <p>Ici, pas de théorie inutile : chaque notion enseignée trouve sa place dans des projets concrets, inspirés du réel.<br> Que vous découvriez le JavaScript moderne, que vous structuriez vos premières APIs en Symfony ou que vous optimisiez un workflow CI/CD, notre approche se veut claire, progressive<br> et ancrée dans les outils réellement utilisés en entreprise.</p>

        <p>Notre objectif est simple : faire gagner du temps aux apprenants, leur transmettre une méthode de travail solide et les aider à bâtir les compétences techniques<br> qu’attendent les recruteurs du secteur numérique.</p>

        {# <p>Constituendi autem sunt qui sint in amicitia fines et quasi termini diligendi. De quibus <br> tres video sententias ferri, quarum nullam probo, unam, ut eodem modo erga amicum adfecti simus, quo erga <br> nosmet ipsos, alteram, ut nostra in amicos <br> benevolentia illorum erga nos benevolentiae pariter aequaliterque respondeat,<br> tertiam, ut, quanti quisque se ipse facit, tanti fiat ab amicis.</p>

        <p>Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque<br> discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum<br> rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi<br> impetraverint, non inmorantur.</p>

        <p>Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia,<br> mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis,<br> et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae.</p> #}
    </div>

    <hr>

    <div class="formations_accueil">
        <h2> Formations </h2>

        <div class="row">
            {% for formation in formations %}
            <div class="col-md-4 formation{{ loop.index }}">
            <div class="formation{{ loop.index }}">
                <img src="{{ asset(formation.ImgFormation) }}" alt="{{ formation.NomFormation }}" class="img-fluid" alt={{ formation.NomFormation }}>
                <h3>{{ formation.NomFormation }}</h3>
                <p>{{ formation.DescriptionResumerFormation|raw }}</p>{# raw sert à afficher le HTML sans l'échapper #}
            </div>
            <a href="{{ path('formation_exemple', {'id': formation.id}) }}">Détails -></a>
            </div>
            {% endfor %}
        </div>

        <a class="col-12 details_accueil" href="{{ path('formation') }}">plus de formations -></a>
    
    </div>

    <hr>

    <div class="formateur_accueil">
        <h2>Formateur</h2>

        <img src="{{ asset('assets/img/formateur.jpeg') }}" alt="photo du formateur siegfried burgeot" class="img-fluid">

        <h3>Siegfried Burgeot</h3>
        <p>Développeur web confirmé avec <label>plus de 10 ans d'expérience</label> dans le secteur,<br> Siegfried Burgeot s’est <label>spécialisé dans la formation professionnelle</label> afin de<br> partager son expertise technique et sa connaissance du terrain.</p>

        <p>Après un parcours en entreprise où il a évolué sur des <label>projets web variés</label> (sites<br> vitrine, e-commerce, applications web), il intervient aujourd’hui comme<br> formateur en développement web <label>auprès d’un public adulte</label>, en reconversion<br> ou en montée en compétences.</p>

        <p>Il structure ses contenus <label>autour de cas concrets</label>, mêlant théorie, pratique, et<br> veille technologique, pour offrir des formations efficaces et<br><label>ancrées dans la réalité du métier.</label></p>
    
    </div>

    <hr>

    <div class="actualites_accueil">
        <h2>Actualités</h2>
        <div class="row g-4">
            {% for actualite in actualites %}
                <div class="col-md-4">
                    <div class="actualite">
                    <img src="{{ asset(actualite.ImgActu) }}" alt="{{ actualite.TitreActu }}">
                    <h3>{{ actualite.TitreActu }}</h3>
                    <div class="description">
                        {{ actualite.DescriptionResumerActu }}
                        <div class="date">{{ actualite.Date|date('d/m/Y') }}</div>
                        <a class="lien" onclick="window.location.href='{{ path('actu_exemple', {'id': actualite.id}) }}'" >aller sur l'article -></a>
                    </div>
                    <button class="toggle"><span>lire plus</span><span class="arrow">▼</span></button>
                    </div>
                </div>
            {% endfor %}
            <a href="{{ path('actualites') }}">plus d'actualités -></a>
        </div>
    </div>

    <hr>

    <div class="contact_accueil">
        <a href="{{ path('contact') }}"><h2>↓ Prendre contacte via la page contact ↓</h2></a>
    </div>

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

    <script>
        const scrollToTopButton = document.getElementById('scrollToTop'); // cette ligne récupère le bouton "scrollToTop" par son ID

        window.addEventListener('scroll', () => {//cette ligne ajoute un écouteur d'événement pour le défilement de la fenêtre
            if (window.scrollY > 200) { // cette ligne vérifie si la position de défilement verticale est supérieure à 200 pixels
                scrollToTopButton.style.display = 'block';  // si c'est le cas, le bouton est affiché
            } else {
                scrollToTopButton.style.display = 'none'; // sinon, le bouton est masqué
            }
        });

        scrollToTopButton.addEventListener('click', () => { // cette ligne ajoute un écouteur d'événement pour le clic sur le bouton
            window.scrollTo({ // cette ligne fait défiler la fenêtre vers le haut de la page
                top: 0, // cette ligne définit la position de défilement verticale à 0, ce qui correspond au haut de la page
                behavior: 'smooth' // cette ligne ajoute un effet de défilement fluide
            });
        });

        document.querySelectorAll('.toggle').forEach(button => { // cette ligne sélectionne tous les boutons avec la classe "toggle" et ajoute un écouteur d'événement pour chacun
            button.addEventListener('click', () => { // cette ligne ajoute un écouteur d'événement pour le clic sur chaque bouton
                const container = button.closest('.actualite'); // cette ligne récupère le conteneur le plus proche de l'élément cliqué avec la classe "actualite"
                container.classList.toggle('open'); // cette ligne bascule la classe "open" sur le conteneur, ce qui peut être utilisé pour afficher ou masquer le contenu supplémentaire
            });
        });
    </script>

{% endblock %}