{% extends 'layouts/base.njk' %}

{% set title = 'Example App - Hello world!' %}

{% block scripts %}
    <script src="/js/register.js"></script>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="panel center">
            <h1>Register</h1>

            <form action="{{ route('register') }}" method="POST">
                <section class="sub-panel">
                    <h2>Username</h2>
                    {{ macros.field(_locals, 'text', 'username', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
                </section>

                <section class="sub-panel">
                    <h2>Password</h2>
                    {{ macros.field(_locals, 'password', 'password', null, 'Choose a password', null, 'required') }}
                    {{ macros.field(_locals, 'password', 'password_confirmation', null, 'Confirm your password', null, 'required') }}
                </section>

                {{ macros.field(_locals, 'checkbox', 'terms', null, 'I accept the terms of services', null, 'required') }}

                <button type="submit"><i data-feather="user-plus"></i>Register</button>

                {{ macros.csrf(getCsrfToken) }}
            </form>
        </div>
    </div>
{% endblock %}