{% extends 'base.html.twig' %}

{% block title %}{{ page_title }}{% endblock %}

{% block body %}
  <section class="proscreen-onboarding">
    <div class="container">
      <div class="proscreen-onboarding__left">
        <div>
          <img src="{{ asset('images/proscore-logo.svg') }}" alt="ProScore Logo">
        </div>
        <div class="d-flex flex-column gap-64px">
          <article>
            <header class="d-flex flex-column gap-8px">
              <h1>Sign in</h1>
            </header>
          </article>
          <form
            id="signInForm"
            action="{{ path('app_login') }}"
            method="POST"
            class="d-flex flex-column gap-32px"
          >
            <input
              type="hidden"
              name="_csrf_token"
              data-controller="csrf-protection"
              value="{{ csrf_token('authenticate') }}"
            >
            <div class="form-group">
              <label for="username" class="body-text">
                <span class="fw-bold">Email</span>
                <span class="proscreen-black-3-text">(required)</span>
              </label>
              <input
                name="_username"
                type="email"
                class="form-control"
                placeholder="Enter your email"
                id="username"
                value="{{ last_username }}"
                required
              />
            </div>
            <div class="form-group">
              <label for="password" class="body-text">
                <span class="fw-bold">Password </span>
                <span class="proscreen-black-3-text">(required)</span>
              </label>
              <input
                name="_password"
                type="password"
                class="form-control"
                id="password"
                placeholder="Enter password"
                autocomplete="current-password"
                required
              />
            </div>
            <div class="form-check form-switch">
              <label class="form-check-label body-text" for="passwordSwitch">Show password</label>
              <input class="form-check-input" type="checkbox" role="switch" id="passwordSwitch"
                     aria-label="Toggle password visibility"/>
            </div>
            <div class="form-group">
              <a href="{{ path('app_forgot_password') }}" class="align-self-end">Forgot password</a>
            </div>
            <div class="d-flex gap-32px align-items-center">
              <button type="submit" class="ps-button primary button-text align-self-start">
                <span>Sign in</span>
                <span>
                  <img src="{{ asset('images/button-arrow.svg') }}" alt="Button arrow">
                </span>
              </button>
              {% if error %}
                <p class="body-text-small fw-bold mb-0 proscreen-red-1-text" id="invalidError">
                  {{ error.messageKey|trans(error.messageData, 'security') }}
                </p>
              {% endif %}
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="proscreen-onboarding__right"></div>
  </section>
  <!-- Bootstrap JS Bundle with Popper (required for tooltips) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // Initialize all tooltips on the page
      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
      tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
      });
    });

    document.addEventListener("DOMContentLoaded", function () {
      // Get DOM elements with null checks
      const passwordInput = document.getElementById("password");
      const confirmPasswordInput = document.getElementById("confirmPassword");
      const passwordSwitch = document.getElementById("passwordSwitch");
      const passwordError = document.getElementById("passwordError");
      const form = document.querySelector("#createPasswordForm");

      // Only proceed if all required elements exist
      if (!passwordInput || !confirmPasswordInput || !passwordSwitch || !form) {
        return; // Exit if any essential element is missing
      }

      // Toggle password visibility (only if switch exists)
      if (passwordSwitch) {
        passwordSwitch.addEventListener("change", function () {
          const type = this.checked ? "text" : "password";
          if (passwordInput) passwordInput.type = type;
          if (confirmPasswordInput) confirmPasswordInput.type = type;
        });
      }

      // Validate password match
      function validatePassword() {
        if (!passwordInput || !confirmPasswordInput || !passwordError) return false;

        if (passwordInput.value !== confirmPasswordInput.value) {
          passwordError.classList.remove("d-none");
          return false;
        } else {
          passwordError.classList.add("d-none");
          return true;
        }
      }

      // Add event listeners for real-time validation (only if elements exist)
      if (confirmPasswordInput) {
        confirmPasswordInput.addEventListener("input", validatePassword);
      }
      if (passwordInput) {
        passwordInput.addEventListener("input", validatePassword);
      }

      // Form submission handler (only if form exists)
      if (form) {
        form.addEventListener("submit", function (e) {
          if (!validatePassword()) {
            e.preventDefault();
            // Additional validation can be added here
            if (passwordInput && passwordInput.value.length < 10) {
              alert("Password must be at least 10 characters long");
            }
          }
        });
      }
    });
  </script>
{% endblock %}