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

{% extends "base.twig" %}

{% block content %}

<hr color="silver" noshade>
    <h1>{{ __("Register") }}</h1>


    {% 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 }}">

        <label for="i_df82a9bc21">{{ __("Username:") }}</label><br>
        <input class="form-control" id="i_df82a9bc21" type="text" name="df82a9bc21" value="{{ lastFormField(formId, "df82a9bc21") }}" required><br>
        <br>
        <label for="i_display_name">{{ __("Display name:") }}</label><br>
        <input class="form-control" id="i_display_name" type="text" name="display_name" value="{{ lastFormField(formId, "display_name") }}" required><br>
        <br>
        <label for="i_password">{{ __("Choose password:") }}</label><br>
        <input class="form-control" id="i_password" type="password" name="password" required><br>
        <br>
        <label for="i_password_retype">{{ __("Repeat password:") }}</label><br>
        <input class="form-control" id="i_password_retype" type="password" name="password_retype" required><br>
        <br>
        <label for="i_email">{{ __("Email address:") }}</label><br>
        <input class="form-control" id="i_email" type="email" name="email" value="{{ lastFormField(formId, "email") }}" required><br>
        <br>
        <label for="i_captcha">{{ __("CAPTCHA:") }}</label><br>
        <img src="?_action=captcha&amp;t={{ "now"|date("Uv") }}" alt="CAPTCHA" width="192" height="48" id="captcha-img" border="1">
        <table cellspacing="0" cellpadding="0"><tr>
        <td>
            <input type="text" name="captcha" id="i_captcha" class="form-control" required>
        </td>
        <td>
            &nbsp;<button class="seamless" type="button" id="btn-refresh-captcha"><img src="/ui/theme-files/old/refresh.gif" width="16" height="16" border="0" draggable="false" alt="{{ __("New CAPTCHA") }}"></button>
        </td>
        </tr></table>
        <br>

        <button type="submit">{{ __("Register now") }}</button>
        
        <br><br>
        <table border="1" bordercolor="green" cellspacing="0" cellpadding="4">
        <tr>
        <td>
            {{ __("Already have an account? %link%Sign in now%/link%", {
                "link": '<a href="?_action=auth">',
                "/link": '</a>',
            }) }}
        </td>
        </tr>
        </table>
    </form>
{% endblock %}

{% block scripts %}
{{ parent() }}
<script type="text/javascript">
$(function() {
    $("#btn-refresh-captcha").click(function() {
        $("#captcha-img").attr("src", "?_action=captcha&t=" + new Date().getTime().toString());
    });
});
</script>
<script type="text/javascript">
$(function() {
    $("#i_df82a9bc21").focus();
});
</script>
{% endblock %}