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

{% extends "base.twig" %}

{% block content %}

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

<div class="col-md-4"></div>

<div class="well col-md-4">
    {% 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 margin-bottom">
                <img src="?_action=captcha&amp;t={{ "now"|date("Uv") }}" alt="CAPTCHA" width="192" height="48" id="captcha-img">
            </div>
            <div class="input-group">
                <input type="text" name="captcha" id="i_captcha" class="form-control" required>
                <div class="input-group-btn">
                    <button class="btn btn-default" type="button" id="btn-refresh-captcha"><span class="fa fa-refresh" aria-hidden="true"></span><span class="sr-only">{{ __("New CAPTCHA") }}</span></button>
                </div>
            </div>
        </div>

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

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

<div class="col-md-4"></div>

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

{% endblock %}