{% extends "base.html" %}

{% block content %}
<section class="section container">
  <div class="columns is-mobile">

    <!-- dashboard menu -->
    <div class="column is-one-quarter">
      {% include 'dashboard/_dash_menu.html' %}
    </div>

    <!-- dashboard content -->
    <div class="column is-5 section">
      <div class=" ">
        <!-- form -->
        <form action="" method="POST" autocomplete="off">
          {{ form.hidden_tag() }}

          <!-- username -->
          <div class="field">
            <p class="control">{{ form.username(class="text-field-addUser", placeholder="User Name", autocomplete="off") }}</p>
            {% for error in form.username.errors %}
              <span class="help" style="color: red;">{{ error }}</span>
            {% endfor %}
          </div>

          <!-- email -->
          <div class="field">
            <p class="control">{{ form.email(class="text-field-addUser", type="email", placeholder="User Email", autocomplete="off") }}</p>
            {% for error in form.email.errors %}
              <span class="help" style="color: red;">{{ error }}</span>
            {% endfor %}
          </div>

          <!-- password -->
          <div class="field">
            <p class="control">{{ form.password(class="text-field-addUser", placeholder="Password", autocomplete="off") }}</p>
            {% for error in form.password.errors %}
              <span class="help" style="color: red;">{{ error }}</span>
            {% endfor %}
          </div>

          <!-- password 2 -->
          <div class="field">
            <p class="control">{{ form.password2(class="text-field-addUser", placeholder="Repeat Password", autocomplete="off") }}</p>
            {% for error in form.password2.errors %}
              <span class="help" style="color: red;">{{ error }}</span>
            {% endfor %}
          </div>

          <div class="field">
            <p>{{ form.administrator(class="checkbox check-space form-checkbox", type="checkbox") }} {{ form.administrator.label
              }}
            </p>
          </div>

          <!-- register button -->
          <div class="field">
            <p class="control">
              <button class="submit-button addUser-form">
                Add User
              </button>
            </p>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
{% endblock content %}