{% extends "registration/base.html" %}

{% block style %}
    {{ block.super }}
    <style>
        .registration-label {
            color: #000000;
            margin-right: 10px;
            padding-right: 10px;
            float: left
        }
    </style>
{% endblock %}

{% block login_body_content %}
    <div class="login-box password-reset">
    <p>{% translate_text "fields with * is required" capfirst %}</p>
    <form method="post">
        {% csrf_token %}
        <fieldset class="module aligned">
            <div style="float: left">
                {% block base_registration_fields %}
                    {% block auth_key_field %}
                        <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                            {{ form.username.errors }}
                            <label for="id_username" class="registration-label">*{% translate_text "username" capfirst %}:</label>
                            {{ form.username }}
                        </div>
                    {% endblock %}
                    {% block auth_email %}
                        <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                            {{ form.email.errors }}
                            <label for="id_email" class="registration-label">*{% translate_text "email" capfirst %}:</label>
                            {{ form.email }}
                        </div>
                    {% endblock %}
                    {% block registration_password_fields %}
                        <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                            {{ form.password1.errors }}
                            <label for="id_password1" class="registration-label">*{% translate_text "password" capfirst %}:</label>
                            {{ form.password1 }}
                        </div>
                        <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                            {{ form.password2.errors }}
                            <label for="id_password2" class="registration-label">*{% translate_text "confirm password" capfirst %}:</label>
                            {{ form.password2 }}
                        </div>
                    {% endblock %}
                {% endblock %}
                {% block additional_registration_fields %}
                {% endblock %}
            </div>
            <div style="text-align: center; clear: both">
                <input type="submit" value="{% translate_text "register" capfirst %}" class="btn btn-primary">
            </div>
        </fieldset>
    </form>
{% endblock %}

{% block after_content %}
    {% block registration_confirmation_script %}
    <script type='text/javascript'>
        $(document).ready(function () {
          const params = new URLSearchParams(document.location.search);
          const uid = params.get("uid");
          if (Array.from(params.keys()).length === 1 && uid !== null) {
            const form = document.createElement("form");
            const uidInput = document.createElement("input");

            form.method = "POST";
            form.action = document.location.href;

            uidInput.value = uid;
            uidInput.name = "uid";
            form.appendChild(uidInput);
            form.appendChild(document.getElementsByName('csrfmiddlewaretoken')[0]);

            document.body.appendChild(form);

            form.submit();
          }
        });
    </script>
    {% endblock %}
{% endblock %}