{% extends "layout.html" %}
{% load crispy_forms_tags %}

{% block head %}
{{ wizard.form.media }}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}css/smart_wizard.css" />
{% endblock %}

{% block content %}

  <h1>User registration</h1>

  <div class='swMain'>

    <ul class='anchor'>
      {% for step in wizard.steps.all %}
        <li>
          <a href="#step-1" class="selected" isdone="0" rel="1">
            <label class="stepNumber">{{forloop.counter}}</label>
            <span class="stepDesc">Step {{forloop.counter}}<br><small>NAME OF THE STEP HERE</small></span>
          </a>
        </li>
      {% endfor %}
    </ul>
    <div style='clear: both;'/>
    
        <form action="" method="post">{% csrf_token %}
          <table>
            {% if wizard.form.forms %}
                {{ wizard.management_form }}
                {% for form in wizard.form.forms %}
                    {% crispy form form.helper %}
                {% endfor %}
            {% else %}
                {{ wizard.management_form }}
                {% crispy wizard.form %}
            {% endif %}
          </table>

    {% if wizard.steps.prev %}
      <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
      <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
    {% endif %}

    <div class='actionBar'>
      <input class='buttonNext' type="submit" value="{% trans "submit" %}"/>

      <div class="contrdol-group">
        <div class="contrdols">
          {% if wizard.steps.prev %}
            <button class="buttonPrevious" name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">prev step</button>
          {% endif %}
          <input class="buttonNext" type="submit" value="next step"/>
        </div>
      </div>
    </div>
        </form>

    <div class="progress progress-info progress-striped" style="clear: both;">
        <div class="bar" style="width:{% widthratio wizard.steps.step1 wizard.steps.count 100%}%">
          Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}
        </div>
    </div>
  </div><!-- swMain -->

{% endblock %}