{% extends 'quintet/dashboard.html' %}

{% block title %}Add User{% endblock %}

{% block active_nav %}Users{% endblock %}

{% block content %}
<h1>Add User</h1>

<form enctype="multipart/form-data" method="post">{% csrf_token %}
  <div class="form-group">
    <label for="{{ form.username.id_for_label }}" class="sr-only">{{ form.username.label }}</label>
    {{ form.username }}
    {{ form.username.errors }}
  </div>

  <div class="row">
    <div class="col-sm-6">
      <div class="form-group">
        <label for="{{ form.first_name.id_for_label }}" class="sr-only">{{ form.first_name.label }}</label>
        {{ form.first_name }}
        {{ form.first_name.errors }}
      </div>
    </div>

    <div class="col-sm-6">
      <div class="form-group">
        <label for="{{ form.last_name.id_for_label }}" class="sr-only">{{ form.last_name.label }}</label>
        {{ form.last_name }}
        {{ form.last_name.errors }}
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="{{ form.email.id_for_label }}" class="sr-only">{{ form.email.label }}</label>
    {{ form.email }}
    {{ form.email.errors }}
  </div>

  <div class="form-group">
    <label for="{{ form.twitter.id_for_label }}" class="sr-only">{{ form.twitter.label }}</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      {{ form.twitter }}
    </div>
    {{ form.twitter.errors }}
  </div>

  <div class="form-group">
    <label for="{{ form.bio.id_for_label }}">{{ form.bio.label }}</label>
    {{ form.bio }}
    {{ form.bio.errors }}
  </div>

  <button type="submit" class="btn btn-primary pull-right">
    <span class="glyphicon glyphicon-plus"></span> Add User
  </button>
</form>

{% endblock %}
