{% extends 'base.html' %}

{% block title %}Register{% endblock %}

{% block content %}
  <h2>Register</h2>
  {% if error_msg %}
    <p style="color: red;">{{ error_msg }}</p>
  {% endif %}
  <form method="post" id="registration-form">
    <label for="username">Username</label><br>
    <input type="text" name="username" id="username" required><br>
    <label for="email">Email</label><br>
    <input type="text" name="email" id="email" required><br>
    <label for="password">Password</label><br>
    <input type="password" name="password" id="password" required><br>
    <div id="password-strength" class="password-strength" style="margin-bottom:0.7em;"></div>
    <label for="password">Confirm password</label><br>
    <input type="password" name="password-2" id="password-2" required><br>
    <div id="password-match" class="password-match"></div><br>
    <input type="submit" value="Register">
  </form>

  <script>
    const passwordInput = document.getElementById('password');
    const confirmPasswordInput = document.getElementById('password-2');
    const passwordStrength = document.getElementById('password-strength');
    const passwordMatch = document.getElementById('password-match');

    passwordInput.addEventListener('input', updatePasswordStrength);
    confirmPasswordInput.addEventListener('input', checkPasswordMatch);

    function updatePasswordStrength() {
      const password = passwordInput.value;
      const length = password.length;
      const containsLetters = /[a-zA-Z]/.test(password);
      const containsNumbers = /[0-9]/.test(password);

      let strength = 0;

      if (length >= 5 && length <= 7) {
        strength = 1;
      } else if (length > 7 && containsLetters && containsNumbers) {
        strength = 2;
      } else if (length > 7) {
        strength = 1;
      }

      updateStrengthIndicator(strength);
    }

    function updateStrengthIndicator(strength) {
      const indicator = ['Weak', 'Moderate', 'Strong'];
      const colors = ['red', 'yellow', 'green'];

      passwordStrength.textContent = `Password Strength: ${indicator[strength]}`;
      passwordStrength.style.color = colors[strength];
    }

    function checkPasswordMatch() {
      const password = passwordInput.value;
      const confirmPassword = confirmPasswordInput.value;

      if (password === confirmPassword) {
        passwordMatch.textContent = 'Passwords match';
        passwordMatch.style.color = 'green';
      } else {
        passwordMatch.textContent = 'Passwords do not match';
        passwordMatch.style.color = 'red';
      }
    }
  </script>
{% endblock %}