{% extends 'base.html.twig' %}
{% block title %}Formation{% 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">Formations</li>
        </ol>
    </nav>
    <div class="titre_formation">
        <h1>Formations</h1>
    </div>

    <div class="presentation_formation">
        {% for formation in formations %}
            <div class="col-md-12 formation-item">
                <h2>{{ formation.nomFormation }}</h2>
                <img src="{{ asset(formation.imgFormation) }}" alt="{{ formation.nomFormation }}">
                <div class="description">
                {{ formation.DescriptionResumerFormation|default('Description non disponible')|raw }}
                </div>
                <div class="formation-details">
                    <hr>
                    <div class="row">
                        <div class="col-sm-6 col-md-6 col-lg-1 col-xxl-1 logo">
                            <img src="{{ asset ('assets/img/prix.png') }}" alt="icone de prix">
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2 col-xxl-2 détails">
                            {{ formation.prixFormation }}
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-1 col-xxl-1 logo">
                            <img src="{{ asset ('assets/img/lieu.png') }}" alt="icone de lieu">
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-5 col-xxl-5 détails">
                            {{ formation.adresseFormation }}
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-1 col-xxl-1 logo">
                            <img src="{{ asset ('assets/img/' ~ (formation.typeFormation == 0 ? 'presentiel.png' : 'enligne.png')) }}" alt="icone de type">
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-2 col-xxl-2 détails">
                            {{ formation.typeFormation == 0 ? 'Présentiel' : 'En ligne' }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="lien">
                <a onclick="window.location.href='{{ path('formation_exemple', {'id': formation.id}) }}'">En savoir plus -></a>
            </div>
        {% endfor %}
    </div>
    <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'
            });
        });
    </script>
{% endblock %}