{% set title = "Register" %}

{% extends "layout/bootstrap.html" %}

{% block content %}
{% macro render_field(field) %}
	<dt>{{ field.label }}
	<dd>{{ field(**kwargs)|safe }}
	{% if field.errors %}
		<ul class=errors>
		{% for error in field.errors %}
		<li>{{ error }}</li>
		{% endfor %}
		</ul>
	{% endif %}
	</dd>
{% endmacro %}
<script src="{{ url_for('static', filename='js/alerts.js') }}"></script>
<div class="container pt-3">
	<div class="row alert-section">
		<div class="col-md-8 mx-auto">
			<div class="card rounded-1">
				<div class="card-header">
					<h3 class="mb-0">Register</h3>
				</div>
				<div class="card-body row">
					<div class="col-md-6">
						<form method=post>
						<dl>
							{{ render_field(form.email) }}
							{{ render_field(form.password) }}
							{{ render_field(form.confirm_password) }}
							{{ render_field(form.firstname) }}
							{{ render_field(form.surname) }}
							{{ render_field(form.accept_tos) }}
						</dl>
						<input type=submit value="Register">
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
{% with messages = get_flashed_messages() %}
	{% if messages %}
let alertArea = document.getElementsByClassName("alert-section")[0];
		{% for message in messages %}
alertAbove(alertArea, "info", "{{ message }}");
		{% endfor %}
	{% endif %}
{% endwith %}
</script>
{% endblock %}