{% load i18n %}
<div class="fr-container fr-my-3w">
  <div class="fr-stepper">
    <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>
    </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>