{% extends "base.html" %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-md-6 col-lg-4">
    <h1 class="mb-4">{{ _('Register') }}</h1>
    <form method="POST" aria-label="{{ _('Registration form') }}" autocomplete="on">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="mb-3">
        <label for="reg-username" class="form-label">{{ _('Username') }} <span aria-hidden="true" class="text-danger">*</span></label>
        <input type="text"
               id="reg-username"
               name="username"
               class="form-control"
               required
               autocomplete="username"
               aria-required="true">
      </div>
      <div class="mb-3">
        <label for="reg-password" class="form-label">{{ _('Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
        <input type="password"
               id="reg-password"
               name="password"
               class="form-control"
               required
               autocomplete="new-password"
               aria-required="true">
      </div>
      <div class="mb-3">
        <label for="reg-password2" class="form-label">{{ _('Confirm Password') }} <span aria-hidden="true" class="text-danger">*</span></label>
        <input type="password"
               id="reg-password2"
               name="password2"
               class="form-control"
               required
               autocomplete="new-password"
               aria-required="true">
      </div>
      {% if error %}
      <div class="alert alert-danger" role="alert">
        {{ error }}
      </div>
      {% endif %}
      <button type="submit" class="btn btn-primary w-100">{{ _('Register') }}</button>
    </form>
    <div class="mt-3 text-center">
      <a href="{{ url_for('login') }}">{{ _('Already have an account? Login!') }}</a>
    </div>
  </div>
</div>
{% endblock %}