</div>

<footer class="footer mt-auto py-3">
    <div class="container">

<div class="progress">
    {%- if active in ('welcome', 'restore', 'credentials', 'printer', 'finish') %}
    <div class="progress-bar bg-warning {{ 'progress-bar-striped progress-bar-animated' if active == 'welcome' else '' }}" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <a href="/wizard">1. Welcome</a>
    </div>
    {%- endif %} {%- if active in ('credentials', 'printer', 'finish') %}
    <div class="progress-bar bg-warning {{ 'progress-bar-striped progress-bar-animated' if active == 'auth' else '' }}" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <a href="/wizard/credentials">2. Setup Credentials</a>
    </div>
    {%- endif %} {%- if active in ('printer', 'finish') %}
    <div class="progress-bar bg-warning {{ 'progress-bar-striped progress-bar-animated' if active == 'printer' else '' }}" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <a href="/wizard/printer">3. Printer Info</a>
    </div>
    {%- endif %} {%- if active == 'finish' %}
    <div class="progress-bar bg-warning {{ 'progress-bar-striped progress-bar-animated' if active == 'finish' else '' }}" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
        <a href="/wizard/finish">4. Recap</a>
    </div>
    {%- endif %}
</div>
