{% extends 'layout.html' %} {% block main %}

<form
  method="POST"
  action="{{ register_url }}"
  class="mt-3"
  data-aos="zoom-in"
  data-aos-duration="1000"
>
  <h2 class="h2-responsive text-center text-{{ primary_color }}">
    {{ settings.REGISTER_TITLE }}
  </h2>

  <div class="form-outline mb-3">
    <input type="email" id="email" name="email" class="form-control" required />
    <label class="form-label" for="email">
      {{ settings.EMAIL_LABEL }}
    </label>
  </div>

  <div class="form-outline mb-3">
    <input
      type="text"
      id="username"
      name="username"
      class="form-control"
      required
    />
    <label class="form-label" for="username">
      {{ settings.USERNAME_LABEL }}
    </label>
  </div>

  <div class="form-outline mb-2">
    <input
      type="password"
      id="password"
      name="password"
      class="form-control"
      pattern="{{ password_pattern }}"   
      required title="Password must be {{ min_password_length }} characters long!"
      placeholder="Must have at least {{ min_password_length }} characters"
      required
    />
    <label class="form-label" for="password">
      {{ settings.PASSWORD_LABEL }}
    </label>
  </div>

  <div class="d-grid gap-2 mt-2">
    <button type="submit" class="btn btn-{{ primary_color }}">
      {{ settings.REGISTER_BTN_TEXT }}
    </button>
  </div>

  <hr />
  <p class="text-muted text-center mb-2">
    Have an account?<a href="{{ login_url }}"> Login</a>
  </p>
</form>

{% endblock main %}