{#
/**
 * @file
 * A template for header section of the Membership Calculator.
 *
 * Available variables:
 * - steps: a data for steps.
 */
#}
<div class="membership-calc__header">
  <h2 tabindex="0">{{ 'Membership Calculator'|t }}</h2>

  <ul role="tablist" aria-label="{{ 'Membership options selection'|t }}" class="nav nav-pills nav-fill">
    {% for step in steps %}
      {% if step.active %}
        {% set active_step = step.number %}
      {% endif %}
    {% endfor %}
    {% for step in steps %}
      {%
        set step_attributes = create_attribute()
        .setAttribute('role', 'tab')
        .setAttribute('aria-selected', loop.index == active_step ? 'true': 'false')
        .setAttribute('tabindex', loop.index == active_step ? '0': '-1')
      %}

      <li class="nav-item{% if step.active %} active{% endif %}">
        <div class="step-{{ step.number }} step" data-toggle="tab" data-step="{{ step.number }}">
      <span class="nav-pills__text" {% if step.number == active_step %} aria-label="{{ 'current step is'|t }} {{ step.title }}"{% endif %}>
        <span class="number">{{ step.number }}</span>
        <a {{ step_attributes }} class="sr-only-focusable" href="#">{{ step.title }}</a>
      </span>
        </div>
      </li>
    {% endfor %}
  </ul>
</div>


