{% from "components/modal.html" import Modal %}
{% from "components/icon.html" import Icon %}

{% set numbers = ['one', 'two', 'three', 'four', 'five'] %}

{% macro FormSteps(step_count, current_step) -%}
  {% set count = numbers[step_count - 1] %}
  <div class="progress-menu progress-menu--{{ count }}">
    <ul>
      {% for step in range(step_count) %}
        <li class="progress-menu__item
        {% if loop.index < current_step %}
          progress-menu__item--complete
        {% elif loop.index == current_step %}
          progress-menu__item--active
        {% else %}
          progress-menu__item--incomplete
        {% endif %}">
          <a v-on:click="goToStep({{ step }})">
            Step {{ loop.index }}
          </a>
        </li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False, classes="") -%}
  {% set step_count = steps|length %}
  <multi-step-modal-form inline-template :steps={{ step_count }}>
    {% call Modal(name=name, dismissable=dismissable, classes=classes) %}
      <form id="{{ name }}" action="{{ form_action }}" method="POST" v-on:submit="handleSubmit">
        {{ form.csrf_token }}
        <div v-if="$root.activeModal === '{{ name }}'">
          {% for step in steps %}
            <div v-show="step === {{ loop.index0 }}">
              {{ FormSteps(step_count, loop.index) }}
              {{ step }}
            </div>
          {% endfor %}
        </div>
      </form>
    {% endcall %}
  </multi-step-modal-form>
{% endmacro %}