{%extends "base.jinja"%}
{%import "macros/form.jinja" as form%}

{%block title%}{{_('page.register.title')}}{% endblock %}

{%block body%}
<div class="container" id="content">
    <section class="d-flex flex-column align-items-center">
        <h1 class="text-center text-primary-emphasis">{{_('page.register.title')}}</h1>

        <form class="border border-secondary bg-secondary-subtle rounded p-3" method="POST">
            {%include "components/flash.jinja"%}
            {{bp.data["form"].hidden_tag() }}
            {{form.field(input=bp.data["form"].username, id="username", prefix="@")}}
            {{form.field(input=bp.data["form"].password)}}
            {{form.field(input=bp.data["form"].retype_password)}}
            {{form.field(input=bp.data["form"].email)}}
            <button type="submit" class="my-3 btn btn-primary text-center">{{_('page.register.form.submit')}}</button>
        </form>

        <div class="d-flex flex-row justify-content-center">
            <a class="text-muted p-2" href="/secure/login"><small>{{_('page.register.label.login')}}</small></a>
        </div>
    </section>
</div>
{%endblock%}