Template-only MetroUI-widgets-in-Django

add_user.html

<div class="container padding10">
  <h1>Add user</h1>
  <div class="padding10">
    <form method="POST" action="{% url 'user_add' %}">
      {% csrf_token %}
      <fieldset>
        {% with field=form.is_superuser type='switch' %}{% include "share/form_field.html" %}{% endwith %}
        {% with field=form.is_active type='switch' %}{% include "share/form_field.html" %}{% endwith %}
	{% with field=form.username type='text' %}{% include "share/form_field.html" %}{% endwith %}
        {% with field=form.password type='password' %}{% include "share/form_field.html" %}{% endwith %}
        {% with field=form.email type='text' %}{% include "share/form_field.html" %}{% endwith %}
        {% with field=form.first_name type='text' %}{% include "share/form_field.html" %}{% endwith %}
        {% with field=form.last_name type='text' %}{% include "share/form_field.html" %}{% endwith %}
      </fieldset>
      <div class="button-group">
	<input type="submit" value="Add" />
      </div>
    </form>
  </div>
</div>

form_field.html

{{ field.label_tag }}
<p class="tertiary-text-secondary">
  {{ field.help_text }}
</p>
<div>
  {% with field_type=type|default:"" %}
  <div class="input-control {{ field_type }} {{ field_size|default:'size3' }}
              {% if field.errors %}error-state{% endif %}" data-role="input-control">
    {% ifequal field_type "" %}
    {{ field }}
    {% endifequal %}
    {% ifequal field_type "text" %}
    {{ field }}
    <button type="button" class="btn-clear"></button>
    {% endifequal %}
    {% ifequal field_type "password" %}
    {{ field }}
    <button type="button"  class="btn-reveal"></button>
    {% endifequal %}
    {% ifequal field_type "switch" %}
    <label>
      {{ field }}
      <span class="check"></span>
    </label>
    {% endifequal %}
    <span class="tertiary-text text-alert">
      {{ field.errors.as_text }}
    </span>
  </div>
  {% endwith %}
</div>