<div id="steps" class="steps-{{page_labels|length}}">
<ol>
{% for page_label in page_labels %}
{% spaceless %}
<li class="{% if forloop.first %}first{% endif %}
           {% if forloop.last %}last{% endif %}
           {% if forloop.counter == current_page_no %}current{% endif %}
           {% if forloop.counter < current_page_no %}step-before{% endif %}
           {% if forloop.counter > current_page_no %}step-after{% endif %}" >
  {% if forloop.counter < current_page_no %}
  <span class="marker"><span class="mark"></span></span>
  {% else %}
  <span class="marker">{{ forloop.counter }}</span>
  {% endif %}
  <span class="label">{{ page_label }}</span>
</li>
{% endspaceless %}
{% endfor %}
</ol>
</div>
<div id="steps-mobile">
        <div class="position">
        <span class="current-page">{{ current_page_no }}</span>
        <span class="total-pages">{{ page_labels|length }}</span>
        </div>
        {% for page_label in page_labels %}
          {% if forloop.counter == current_page_no %}
          <span class="current-label">{{ page_label }}</span>
          {% endif %}
        {% endfor %}
</div>
