{% load i18n %}
<div class="village-stepper">
  <{{ self.heading_tag | default:"h2" }} class="village-stepper__title">
  <span class="village-stepper__state">
    {% with current_step_id=self.current_step_id total_steps=self.total_steps %}
      {% blocktranslate %}Step {{ current_step_id }} of {{ total_steps }}{% endblocktranslate %}
    {% endwith %}
  </span>
  {{ self.current_step_title }}
  </{{ self.heading_tag | default:"h2" }}>
  <div class="village-stepper__steps"
       data-village-current-step="{{ self.current_step_id }}"
       data-village-steps="{{ self.total_steps }}">
  </div>
  {% if self.next_step_title %}
    <p class="village-stepper__details">
      <span class="village-text--bold">{% translate "Next step:" %}</span> {{ self.next_step_title }}
    </p>
  {% endif %}
</div>
