{% extends "wcs/front/formdata_steps.html" %}
{% block steps-list %}
  {% if page_labels|length > 1 %}
    <div class="theme-steps">
      {% for page_label in page_labels %}
        {% if forloop.counter == current_page_no %}
          <strong class="theme-steps--page-nb">Étape {{ forloop.counter }} sur {{ page_labels|length }}</strong>
          <h2 class="theme-steps--title">
            {{ page_label }}
          </h2>
          <div class="theme-steps--progress-bar" style="--gradient-stop: calc(1% * {{ forloop.counter }} * 100 / {{ page_labels|length }})"></div>
        {% endif%}
      {% endfor%}
      <p class="theme-steps--voir-etapes togglable">
        <span class="theme-steps--voir" aria-label="Voir"></span>
        <a class="theme-steps--panel-open" role="button">Toutes les étapes</a>
      </p>
      <div class="theme-steps--panel" >
        <a class="theme-steps--panel-close" role="button">
          FERMER
          <span class="theme-steps--panel-close-icon"></span>
        </a>
        <h3 class="theme-steps--panel-title">Toutes les étapes</h3>
        {{ block.super }}
      </div>
      <div class="theme-steps--panel-mask"></div>
    </div>
    <script>
      const openStepsBtn = document.querySelector('.theme-steps--panel-open')
      const closeStepsBtn = document.querySelector('.theme-steps--panel-close')
      const stepsMask = document.querySelector('.theme-steps--panel-mask')

      closeStepsBtn.addEventListener('click', function(){
        openStepsBtn.click()
      });
      stepsMask.addEventListener('click', function(){
        openStepsBtn.click()
      });
    </script>
  {% endif %}
{% endblock%}


