{% extends 'base.html' %}

{% block title %}Register{% endblock %}

{% block body %}
<div class="container">
  {% include 'navbar.html' %}

  <div class="columns has-margin-top-5">
    <div class="column is-half is-offset-one-quarter">
      <div class="card">
        <header class="card-header">
          <p class="card-header-title">
            Register
          </p>
        </header>
        <div class="card-content">
          <div class="content">
            <form action="" method="post">
              {% csrf_token %}
              <div class="field">
                <label class="label">Username</label>
                <div class="control">
                  {{ form.username }}
                </div>
                {{ form.username.errors }}
              </div>

              <div class="field">
                <label class="label">Email</label>
                <div class="control">
                  {{ form.email }}
                </div>
                {{ form.email.errors }}
              </div>

              <div class="field">
                <label class="label">Password</label>
                <div class="control">
                  {{ form.password1 }}
                </div>
                {{ form.password1.errors }}
              </div>

              <div class="field">
                <label class="label">Confirm password</label>
                <div class="control">
                  {{ form.password2 }}
                </div>
                {{ form.password2.errors }}
              </div>

              <div class="control">
                <button class="button is-primary">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
