{% extends 'base.html.twig' %}
{% block title %}{{ formation.NomFormation|default('Formation') }}{% endblock %}
{% block body %}
</div>
    <div class="banniere_formationExemple">
        <img src="{{ asset(formation.ImgFormation) }}" alt="{{ formation.NomFormation }}">
    </div>
<div class="container">
    <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"><a href="{{ path('formation') }}">Formations</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ formation.NomFormation|default('Formation') }}</li>
        </ol>
    </nav>
    <div class="titre_formationExemple">
        <h1> {{ formation.NomFormation|default('Titre non disponible') }} </h1>
    </div>
    
    <div class="text_formationExemple">
        <p>
            {{ formation.DescriptionFormation|default('Description non disponible')|raw }}
        </p>
    </div>

    <div class="details_formationExemple">
        <div class="row">
            <div class="col-sm-6 col-lg-1 logo">
                <img src="{{ asset('assets/img/prix.png') }}" alt="icone de prix" class="icon">
            </div>
            <div class="col-sm-6 col-lg-5 details">
                {{ formation.PrixFormation|default('Prix non disponible') }}
            </div>
            <div class="col-sm-6 col-lg-1 logo">
                <img src="{{ asset('assets/img/lieu.png') }}" alt="icone de lieux" class="icon">
            </div>
            <div class="col-sm-6 col-lg-5 details">
                {{ formation.AdresseFormation|default('Lieu non disponible') }}
            </div>

            <div class="col-sm-6 col-lg-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-lg-5 details">
                {{ formation.typeFormation == 0 ? 'Présentiel' : 'En ligne' }}
            </div>
            <div class="col-sm-6 col-lg-1 logo">
                <img src="{{ asset('assets/img/calendrier.png') }}" alt="icone de calendrier" class="icon">
            </div>
            <div class="col-sm-6 col-lg-5 details">
                {{ formation.HoraireFormation|default('Horaires non disponibles')|raw }}
            </div>

            <div class="col-sm-6 col-lg-1 logo">
                <img src="{{ asset('assets/img/competence.png') }}" alt="icone de progression" class="icon"> 
            </div>
            <div class="col-sm-6 col-lg-5 details">
                <label> montée en compétence suivis </label>
            </div>
            <div class="col-sm-6 col-lg-1 logo">
                 <img src="{{ asset('assets/img/mail.png') }}" alt="icone de mail" class="icon">
            </div>
            <div class="col-sm-6 col-lg-5 details">
                <label> échange par mail avec le formateur possible </label>
            </div>

            <div class="col-sm-6 col-lg-1 logo">
                  <img src="{{ asset('assets/img/chapitres.png') }}" alt="icone de chapitres" class="icon">
            </div>
            <div class="col-sm-6 col-lg-5 details">
                {{ formation.ChapitreFormation }} <label> chapitres </label>
            </div>
            <div class="col-sm-6 col-lg-1 logo">
                <img src="{{ asset('assets/img/formateur.png') }}" alt="icone de formateur" class="icon">
            </div>
            <div class="col-sm-6 col-lg-5 details">
                {{ formation.Formateur }}
            </div>
        </div>
    </div>

    <a href="{{ path('contact') }}" class="formation_lien"> ↓ Prendre contacter via la page contact ↓ </a>
    
    <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 %}