{% extends "base.html" %}

{% block head %}
{{ super() }}
{% endblock %}

{% block header %}{{ super() }}{% endblock %}

{% block content %}

<form id="register" method="POST" action="{{ url_for('auth.register') }}" class="h-100 d-flex flex-column align-items-center justify-content-center">
	<h1>Register</h1>
	{{ form.csrf_token }}
	<div class="m-1 d-flex flex-column align-items-center justify-content-center">
		{{ form.username.label(class="form-label align-self-start") }}
		{% if not form.username.errors %}
		{{ form.username(class="form-control", required="") }}
		{% else %}
		{{ form.username(class="form-control is-invalid", required="") }}
		{% for error in form.username.errors %}
		<div class="invalid-feedback">{{ error }}</div>
		{% endfor %}
		{% endif %}
	</div>
	<div class="m-1 d-flex flex-column align-items-center justify-content-center">
		{{ form.password.label(class="form-label align-self-start") }}
		{% if not form.password.errors %}
		{{ form.password(class="form-control", required="") }}
		{% else %}
		{{ form.password(class="form-control is-invalid", required="") }}
		{% for error in form.password.errors %}
		<div class="invalid-feedback">{{ error }}</div>
		{% endfor %}
		{% endif %}
	</div>
	<div class="m-1 d-flex flex-column align-items-center justify-content-center">
		{{ form.confirm.label(class="form-label align-self-start") }}
		{% if not form.confirm.errors %}
		{{ form.confirm(class="form-control", required="") }}
		{% else %}
		{{ form.confirm(class="form-control is-invalid", required="") }}
		{% for error in form.confirm.errors %}
		<div class="invalid-feedback">{{ error }}</div>
		{% endfor %}
		{% endif %}
	</div>
	<div class="m-1 d-flex flex-column align-items-center justify-content-center">
		{% if not form.form_errors %}
		{{ form.submit(class="btn btn-primary") }}
		{% else %}
		{{ form.submit(class="btn btn-primary is-invalid") }}
		{% for error in form.form_errors %}
		<div class="invalid-feedback">{{ error }}</div>
		{% endfor %}
		{% endif %}
	</div>
	<div class="d-flex flex-column align-items-center justify-content-center">
		<span>Already registered?</span>
		<a href="{{ url_for('auth.login') }}">Login here</a>
	</div>
</form>

{% endblock %}

{% block footer %}{{ super() }}{% endblock %}