{% extends "nopaque.html.j2" %}

{% set headline = ' ' %}

{% block page_content %}
<style>
  main {
    background-image: url("{{ url_for('static', filename='images/parallax_lq/02_concept_document_focus_letter.jpg') }}");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

<div class="col s12 m4">
  <div class="card medium">
    <div class="card-content">
      <h2>Register</h2>
      <p>Simply enter a username and password to receive your registration email. After that you can start right away.</p>
      <p>It goes without saying that the <a>General Data Protection Regulation</a> applies, only necessary data is stored.</p>
    </div>
  </div>
</div>

<div class="col s12 m8">
  <div class="card medium">
    <form method="POST">
      {{ registration_form.hidden_tag() }}
      <div class="card-content">
        <div class="input-field">
          <i class="material-icons prefix">person</i>
          {{ registration_form.username(class='validate', data_length='64') }}
          {{ registration_form.username.label }}
          {% for error in registration_form.username.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <div class="input-field">
          <i class="material-icons prefix">vpn_key</i>
          {{ registration_form.password(class='validate') }}
          {{ registration_form.password.label }}
          {% for error in registration_form.password.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <div class="input-field">
          <i class="material-icons prefix">vpn_key</i>
          {{ registration_form.password_confirmation(class='validate') }}
          {{ registration_form.password_confirmation.label }}
          {% for error in registration_form.password_confirmation.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
        <div class="input-field">
          <i class="material-icons prefix">email</i>
          {{ registration_form.email(class='validate', type='email') }}
          {{ registration_form.email.label }}
          {% for error in registration_form.email.errors %}
            <span class="helper-text red-text">{{ error }}</span>
          {% endfor %}
        </div>
      </div>
      <div class="card-action right-align">
        {{ macros.submit_button(registration_form.submit) }}
      </div>
    </form>
  </div>
</div>
{% endblock %}