{% extends 'layout.html' %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="content formpage signuppage pure-g">
    <div class="pure-u-1 pure-u-sm-1-2 pure-u-xl-1-3">
        <h1>{% trans 'Sign up' %}</h1>
        <form class="pure-form pure-form-stacked" action="/account/signup" method="post">
            {% csrf_token %}

            {{ form.username.errors }}
            <label for="username">{% trans 'Username' %}</label>
            <input type="text" id="username" name="username" pattern="[a-zA-Z0-9_-]{2,16}"
                   required="required" value="{{username}}" />
            <p class="inputhelp">{% trans '2 to 32 alphanumeric characters.' %}</p>

            {{ form.password.errors }}
            <label for="password">{% trans 'Password' %}</label>
            <input type="password" id="password" name="password" required="required"
                   value="{{password}}" />
            <p class="inputhelp">{% trans 'Anything from 1 to 256 characters.' %}</p>

            <label for="password2">{% trans 'Repeat' %}</label>
            <input type="password" id="password2" name="password2" required="required"
                   value="{{password}}" />
            <p class="inputhelp">{% trans 'Same password.' %}</p>

            {{ form.email.errors }}
            <label for="email">{% trans 'E-Mail' %}</label>
            <input type="email" id="email" name="email" value="{{email}}" />
            <p class="inputhelp">
                <b>{% trans 'Optional.' %}</b>
                {% trans 'Used to recover your password and confirm stuff.' %}
            </p>

            {% if HCAPTCHA_SITE_KEY and not request.session.signup_captcha_pass %}
            <div class="h-captcha" data-sitekey="{{ HCAPTCHA_SITE_KEY }}" data-callback="onCaptcha"></div>
            <script src="https://hcaptcha.com/1/api.js" async defer></script>
            {% endif %}

            <input type="submit" class="pure-button pure-button-primary" value="{% trans 'Sign up' %}" />
        </form>
        <div class="rightsignup links">
            <ul>
                <li><a href="/account/login">{% trans 'Already a member? Log in' %}</a></li>
                <li><a href="/account/forgot">{% trans 'Forgot your password?' %}</a></li>
                <li><a href="/chat">{% trans 'Need help?' %}</a></li>
            </ul>
        </div>
    </div>
</div>

{% endblock %}

