{% set title = __("Register") %}
{% set formId = "register" %}
{% set formError = getAndClearFormError(formId) %}

{% extends "base.twig" %}

{% block content %}

<div class="page-header">
    <h1>{{ __("Register") }}</h1>
</div>

<div class="main-form">
    {% if formError %}
        {% include "components/alert_error.twig" with { message: formError } %}
    {% endif %}
    <form action="{{ g.server.REQUEST_URI }}" method="post">
        <input type="hidden" name="form_id" value="{{ formId }}">

        <div class="form-group" id="group0">
            <label for="i_username">{{ __("Username:") }}</label>
            <input class="form-control" id="i_username" type="text" name="username" value="" required>
        </div>

        <div class="form-group" id="group1">
            <label for="i_df82a9bc21">{{ __("Username:") }}</label>
            <input class="form-control" id="i_df82a9bc21" type="text" name="df82a9bc21" value="{{ lastFormField(formId, "df82a9bc21") }}" required autofocus>
        </div>

        <div class="form-group" id="group2">
            <label for="i_display_name">{{ __("Display name:") }}</label>
            <input class="form-control" id="i_display_name" type="text" name="display_name" value="{{ lastFormField(formId, "display_name") }}" required>
        </div>

        <div class="form-group" id="group3">
            <label for="i_password">{{ __("Choose password:") }}</label>
            <input class="form-control" id="i_password" type="password" name="password" required>
        </div>

        <div class="form-group" id="group4">
            <label for="i_password_retype">{{ __("Repeat password:") }}</label>
            <input class="form-control" id="i_password_retype" type="password" name="password_retype" required>
        </div>

        <div class="form-group" id="group5">
            <label for="i_email">{{ __("Email address:") }}</label>
            <input class="form-control" id="i_email" type="email" name="email" value="{{ lastFormField(formId, "email") }}" required>
        </div>

        <div class="form-group" id="group6">
            <label for="i_email">{{ __("CAPTCHA:") }}</label>
            <div class="text-center">
                <img src="?_action=captcha&amp;t={{ "now"|date("Uv") }}" alt="CAPTCHA" width="192" height="48" id="captcha-img">
            </div>
            <div class="spring-row">
                <div class="spring-fill">
                    <input type="text" name="captcha" id="i_captcha" class="form-control" required>
                </div>
                <div class="spring-fit">
                    <button class="btn btn-iconic" type="button" id="btn-refresh-captcha" title="{{ __("New CAPTCHA") }}">
                        <svg viewBox="0 0 24 24" class="icon"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/><path d="M16 16h5v5"/></svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="form-group form-actions">
            <button class="btn btn-primary" type="submit">{{ __("Register now") }}</button>
        </div>

        <div class="form-group form-additional">
            {{ __("Already have an account? %link%Sign in now%/link%", {
                "link": '<a href="?_action=auth">',
                "/link": '</a>',
            }) }}
        </div>
    </form>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelector("#btn-refresh-captcha").addEventListener("click", function() {
        document.querySelector("#captcha-img").src = "?_action=captcha&t=" + new Date().getTime().toString();
    });
    (function($$) {
        $$.disabled = true;
        $$.required = false;
    })(document.querySelector("#i_username"));
});
</script>

{% endblock %}