{% extends "base/document.html" %}
{% load crispy_forms_tags %}
{% block title %}
  {% trans "Create an account." %}
{% endblock %}
{% block content %}
  <h2>{% trans "Create new account." %}</h2>
  <form method="post" action="{% url 'fnprofile:new_profile' %}">
    {% csrf_token %}
    {{ form|crispy }}
    <button type="submit button" class="btn btn-outline-primary">
      {% trans "Confirm" %}
    </button>
  </form>
  <p>
    {% trans "Already have an account?" %}
    <a href="{% url 'fnprofile:log_in' %}">{% trans "Login here" %}</a>
  </p>
{% endblock %}
{% block extra_js %}
  <script>
    $(document).ready(function() {
      $("#div_id_agree_terms").before(
        '<a href="{% url "home:service_terms" %}" target="fnhome/service_terms">{% trans "Terms of Service" %}</a>'
      );
    });

    function check_generate_password_check_input() {
      var generate_password_check_input = $("#id_generate_password")
      var password1_element = $("#id_password1")
      var password2_element = $("#id_password2")
      var generated_password = password1_element.data("generated_password")
      password_elements = [password1_element, password2_element]
      for (var password_element of password_elements) {
        if (generate_password_check_input.is(':checked')) {
          password_element.val(generated_password)
          password_element.attr('type', 'text');
          password_element.prop('readonly', true)
        } else {
          password_element.val("")
          password_element.attr('type', 'password');
          password_element.prop('readonly', false)
        }
      }
    }

    $(document).ready(function() {
      check_generate_password_check_input()
    });

    $(document).ready(function() {
      $('#id_password1_helptext ul').append(
        `<li class='text-danger fw-bold'>
        {% trans 'Remember your password! If you forget it, your account will only be deleted after expiration, and FNSCHOOL will not reset your password for you!' %}
        </li>`
      );
    })

    $(document).on('click', '#id_generate_password', function() {
      check_generate_password_check_input()
    });
  </script>
{% endblock %}