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

{% block title %}AFC E-learning{% endblock %}

{% block body %}
{% include 'partials/accountNavbar.html.twig' %}

{% include 'partials/filter.html.twig' %}
<section class="secondary-section">

    <div class="content">

        {% include 'partials/_progressBar.html.twig' %}


            <div class="banner">
            <div>
                <button class="menu-btn" id="step-menu-btn">
                <span class="material-icons">
                    list
                </span>
            </button>
            </div>
            </div>
        <div class="chapter-content">
        <h2 class="text-center text-secondary mb-5">{{ training.name }}</h2>
        <h3 class="text-secondary">Le programme de la formation :</h3>
        <ul>
            {% for mod in training.module %}
               <li class="mt-3">
                <span class="h5 secondary-color">{{ mod.name }}</span>
                <ul>
                    {% for chap in mod.trainingChapters %}
                        <li>{{ chap.title }}</li>
                    {% endfor %}
                </ul>
                </li>
            {% endfor %}
            <li class="h5 mt-3"><span class="secondary-color">Evaluation finale</span></li>
        </ul>
        <div class="text-center">
        <a href="{{ path('training_start', {'slug': training.slug }) }}" class="my-5 secondary-btn">Commencer la formations</a>
        </div>
        </div>
    </div>
    {% include 'partials/trainingStepper.html.twig' %}
</section>
{% endblock %}

{% block javascripts %}
<script>
  let stepMenuBtn = document.getElementById('step-menu-btn');
  let sideMenu = document.getElementById('side-menu');
  let closeSideMenu = document.getElementById('close-side-menu');
  let filter = document.getElementById('filter');


  // Ouverture du menu
  stepMenuBtn.addEventListener('click', function(){
      sideMenu.style.right = 0 + 'px';
      filter.style.left = 0 + 'px';
  });

  // Fermeture du menu
  closeSideMenu.addEventListener('click', function(){
      sideMenu.style.right = -555 + 'px';
      filter.style.left = -105 + 'vw';
  });

  filter.addEventListener('click', function(){
      sideMenu.style.right = -555 + 'px';
      filter.style.left = -105 + 'vw';
  })
</script>
{% endblock %}