{% if pages|length > 1 %}
<div style="margin-block: 1.2rem;">
    <ul class="step">
        {% for page in pages %}
            <li class="step-item {%- if page.id == page_id %} active {%- elif page.id < page_id and not page.eval_when %} skipped {%- endif %}">
                <!-- NOTE: This explicitly needs to be a button and not an input! Otherwise the styling won't work as pseudo-elements only work with buttons. -->
                <button class="tooltip" data-tooltip="{{ page.title }}" form="checklist_form" formnovalidate="formnovalidate" name="submit_action" type="submit" value="Page {{ page.id }}">Page {{ page.id + 1 }}</button>
            </li>
        {% endfor %}
    </ul>
</div>
{% endif %}
