{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load crispy_forms_tags %}

{% block title %}{% trans "templates.djangoRegistration.registrationForm.title" %}{% endblock %}
{% block head %}
{% endblock %}

{% block content %}
  <div class="app-login-wrapper">
    <div class="row">
      <div class="col-lg-4">
        <img class="mb-4" src="{% static 'logo-amcr-cs.svg' %}" alt="{% trans 'templates.djangoRegistration.registrationForm.logo.alt' %}" class="app-logo">
        <div class="card">
          <div class="card-body">
            <form method="POST" class="form-group" onsubmit="registerSumbitButton.disabled = true; return true;" class="mb-0">
              {% crispy form %}
              <button id="registerSumbitButton" type="submit" class="btn btn-primary btn-block">{% trans "templates.djangoRegistration.registrationForm.submitButton.text" %}</button>
            </form>
          </div>
        </div>
      </div>
      <div class="col-lg-8 app-col-desc">
        <div class="app-inner">
          <div class="card app-desc">
            <div class="card-body">
              <h3>{% trans "templates.djangoRegistration.registrationForm.cardHeader.registrace" %}</h3>
              <p>
                {% trans "templates.djangoRegistration.registrationForm.registrace.part1" %}
                {% trans "templates.djangoRegistration.registrationForm.registrace.part2" %}
                {% trans "templates.djangoRegistration.registrationForm.registrace.part3" %}
                {% trans "templates.djangoRegistration.registrationForm.registrace.part4" %}
              </p>
            </div>
          </div>
          <hr />
          <div class="card app-news">
            <div class="card-body">
              <h3>{% trans "templates.djangoRegistration.registrationForm.cardHeader.prubeh" %}</h3>
              <div class="app-sroll-inner">
                <ul>
                  <li>{% trans "templates.djangoRegistration.registrationForm.prubeh.part1" %}</li>
                  <li>{% trans "templates.djangoRegistration.registrationForm.prubeh.part2" %}</li>
                  <li>{% trans "templates.djangoRegistration.registrationForm.prubeh.part3" %}</li>
                  <li>{% trans "templates.djangoRegistration.registrationForm.prubeh.part4" %}</li>
                  <li>{% trans "templates.djangoRegistration.registrationForm.prubeh.part5" %}</li>
                  <li>{% trans "templates.djangoRegistration.registrationForm.prubeh.part6" %}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block script %}
  <script>
    document.getElementById("id_email").addEventListener("change", function () {
      this.value = this.value.toLowerCase(); 
    });
  </script>
  <script>
    const togglePassword1 = document.querySelector("#togglePassword1");
    const password1 = document.querySelector("#id_password1");
    const togglePassword2 = document.querySelector("#togglePassword2");
    const password2 = document.querySelector("#id_password2");

    togglePassword1.addEventListener("click", function () {
        // toggle the type attribute
        const type = password1.getAttribute("type") === "password" ? "text" : "password";
        password1.setAttribute("type", type);
        
        // toggle the icon
        this.classList.toggle("bi-eye");
    });

    togglePassword2.addEventListener("click", function () {
      // toggle the type attribute
      const type = password2.getAttribute("type") === "password" ? "text" : "password";
      password2.setAttribute("type", type);
      
      // toggle the icon
      this.classList.toggle("bi-eye");
  });
  </script>
{% endblock %}