{% load i18n %}
<div class="fr-container fr-my-3w">
  <div class="fr-stepper">
    <{{ value.heading_tag | default:"h2" }} class="fr-stepper__title">
    {{ value.title }}
    <span class="fr-stepper__state">
      {% with current_step=value.current total_steps=value.total %}
        {% blocktranslate %}Step {{ current_step }} of {{ total_steps }}{% endblocktranslate %}
      {% endwith %}
    </span>
    </{{ value.heading_tag | default:"h2" }}>
    <div class="fr-stepper__steps"
         data-fr-current-step="{{ value.current }}"
         data-fr-steps="{{ value.total }}"></div>
    <dl class="fr-grid-row fr-grid-row--gutters cmsfr-stepper__details">
      {% for step in value.steps %}
        <div class="fr-col-12 fr-col-sm">
          <dt>
            <span class="fr-text--bold">{{ step.value.title }}</span>
          </dt>
          <dd>
            {{ step.value.detail|linebreaksbr }}
          </dd>
        </div>
      {% endfor %}
    </dl>
  </div>
</div>