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

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

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

{% block body %}
    <h1>Register</h1>

    <div class="container">
        <div class="panel center">
            <form action="{{ route('register') }}" method="POST">
                <section class="sub-panel">
                    <h2>Email</h2>
                    {{ macros.field(_locals, 'checkbox', 'create_email', null, 'Create an email address') }}

                    <div class="inline-fields">
                        {{ macros.field(_locals, 'text', 'username', null, 'Choose your username', null, 'disabled') }}
                        <span>@</span>
                        {{ macros.field(_locals, 'select', 'domain', null, 'Choose your domain', null, 'disabled', ['toot.party']) }}
                    </div>
                    {{ macros.fieldError(_locals, 'email') }}
                </section>

                <section class="sub-panel">
                    <h2>Recovery email</h2>
                    {{ macros.field(_locals, 'email', 'recovery_email', null, 'Your email address', 'Optional') }}
                </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">Register</button>

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