{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-center flex-wrap w-80">
    <div class='position-relative my-2'>
		<img class="border rounded-circle my-3" src="{{ url_for('static', filename='assets/stashr.svg') }}" width="200" height="200" />
	</div>
    <div class="bg-light m-2 px-2 rounded stashr-series_info text-center text-lg-start py-3 px-5">
        <h5 class="text-center">Register</h5>
        <hr />
        <form action="{{ url_for('register_page') }}" method="post" id="registration_form">
            {% if registration_form.errors %}
            <div class="notification bg-danger rounded m-3 text-white" role="alert" id='error_container'>
                {% for field_name, field_errors in registration_form.errors|dictsort if field_errors %}
                <ul>
                    {% for error in field_errors %}
					<li>{{ error }}</li>
					{% endfor %}
                </ul>
                {% endfor %}
            </div>
            {% else %}
            {% endif %}
            {{ registration_form.csrf_token }}
            <div class="mb-3">
                {{ registration_form.username(class_='input form-control', placeholder='Username') }}
            </div>
            <div class="mb-3">
                {{ registration_form.email(class_='input form-control', placeholder='E-Mail') }}
            </div>
            <div class="mb-3">
                {{ registration_form.reg_password(class_='input form-control', placeholder='Password', type='password') }}
            </div>
            <div class="mb-3">
                {{ registration_form.confirm_reg_password(class_='input form-control', placeholder='Confirm Password', type='password') }}
            </div>
            <div class="mb-3">
                {{ registration_form.register_button(class_='btn btn-outline-success') }}
            </div>
        </form>
    </div>
</div>

{% endblock %}