{% extends "dictionary/base.html" %}
{% load widget_tweaks functions i18n filters %}
{% block title %}{% trans "register" context "titleblock" %}{% endblock %}

{% block content %}
    <h1 class="h4 mb-3"><strong>{% trans "registration" context "titleblock" %}</strong></h1>
    <form method="post" id="signup">
        {% csrf_token %}

        {% if form.errors %}
            <div class="alert-danger p-3 mb-3 rounded">{% trans "please try again after checking specified errors." %}</div>
            {% for error in form.non_field_errors %}
                <div class="alert-danger p-3 mb-3 rounded">{{ error|i18n_lower }}</div>
            {% endfor %}
        {% endif %}

        {% with WIDGET_ERROR_CLASS='is-invalid' %}
            <div class="form-group">
                <label for="signup_username">{{ form.username.label }}</label>
                {% render_field form.username|attr:"autofocus" class="form-control" id="signup_username" aria-describedby="signup_usernameHelp" %}
                {% if form.username.errors %}
                    {% for error in form.username.errors %}
                        <small class="form-text text-danger">{{ error|i18n_lower }}</small>
                    {% endfor %}
                {% else %}
                    <small id="signup_usernameHelp" class="form-text text-muted">{{ form.username.help_text }}</small>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="signup_email">{{ form.email.label }}</label>
                {% render_field form.email class="form-control" id="signup_email" aria-describedby="signup_emailHelp" %}
                {% if form.email.errors %}
                    {% for error in form.email.errors %}
                        <small class="form-text text-danger">{{ error|i18n_lower }}</small>
                    {% endfor %}
                {% else %}
                    <small id="signup_emailHelp" class="form-text text-muted">{{ form.email.help_text|i18n_lower }}</small>
                {% endif %}
            </div>

            <div class="form-group">
                <label for="signup_password1">{{ form.password1.label|i18n_lower }}</label>
                {% render_field form.password1 class="form-control" id="signup_password1" aria-describedby="signup_password1Help" %}
                <small id="signup_password1Help" class="form-text text-muted password-help">{{ form.password1.help_text|i18n_lower|safe }}</small>
            </div>

            <div class="form-group">
                <label for="signup_password2">{{ form.password2.label|i18n_lower }}</label>
                {% render_field form.password2 class="form-control" id="signup_password2" aria-describedby="signup_password2Help" %}
                {% if form.password2.errors %}
                    {% for error in form.password2.errors %}
                        <small class="form-text text-danger">{{ error|i18n_lower }}</small>
                    {% endfor %}
                {% else %}
                    <small id="signup_password2Help" class="form-text text-muted">{{ form.password2.help_text|i18n_lower }}</small>
                {% endif %}
            </div>

            <div class="d-grid grid-col-2 grid-gap-1 grid-sm-row grid-sm-gap-0">
                <div class="form-group">
                    <label for="signup_gender">{{ form.gender.label }}</label>
                    {% render_field form.gender class="form-control" id="signup_gender" %}
                </div>
                <div class="form-group">
                    <label class="d-block">{{ form.birth_date.label }}</label>
                    <label class="sr-only" for="id_birth_date_day">{% trans "Day of birth" %}</label>
                    <label class="sr-only" for="id_birth_date_month">{% trans "Month of birth" %}</label>
                    <label class="sr-only" for="id_birth_date_year">{% trans "Year of birth" %}</label>
                    <div class="datepick d-grid grid-gap-1 grid-col-3">
                        {% render_field form.birth_date class="form-control" %}
                    </div>
                </div>
            </div>

            <div class="custom-control custom-checkbox">
                {% render_field form.terms_conditions class="custom-control-input" id="terms_conditions" %}
                <label class="custom-control-label" for="terms_conditions">
                    {% blocktrans with terms_url="/terms-of-use/"%}i have read and agree with the <a target="_blank" href="{{ terms_url }}">terms and conditions</a>.{% endblocktrans %}
                </label>
            </div>
        {% endwith %}

        <button onclick="window.scrollTo(0,0);" type="submit" class="btn btn-django stretch my-3">{% trans "register" %}</button>
    </form>
{% endblock %}