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

{% block bodyclass %}register-page{% endblock %}

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

{% block login_body_content %}
    <script>
        function openTermsModal() {
            $('#modal-terms').modal('show');
            const termsIframe = document.getElementById('terms-iframe');

            termsIframe.setAttribute('src', '{% url 'terms' %}');
            termsIframe.addEventListener('load', () => {
                let doc = termsIframe.contentDocument;
                doc.body.innerHTML = doc.body.innerHTML +
                    `<style>
                        #lang-form, .login-logo {display: none;}
                        body {background-color: #fff !important; justify-content: start !important;}
                    </style>`;
            });
        }

    </script>
    <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>
                        {% if form.agreement %}
                            <div style="margin-bottom: 10px; clear:both; text-align:right; line-height:25px;">
                                {{ form.agreement.errors }}
                                <label for="id_agreement" class="registration-label">
                                    *{% translate_text "i accept the " capfirst %}
                                    <a href="#" onclick="openTermsModal()">
                                        {% translate_text "terms of agreement" %}
                                    </a>
                                </label>
                                {{ form.agreement }}
                            </div>
                        {% endif %}
                    {% 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>
        <div class="modal fade" id="modal-terms" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
          <div class="modal-content">
               <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
              </div>
              <div class="modal-body" style="height: 80vh; padding: 0">
                  <div class="embed-responsive" style="height: 100%">
                      <iframe id="terms-iframe"></iframe>
                  </div>
              </div>
          </div>
        </div>
      </div>
{% 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 %}