<!DOCTYPE html>
<html lang="en">
  <head>
    {% load static %}
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reset Your Password - Tayapromediverse</title>
    <link rel="stylesheet" href="{% static 'css/reset.css' %}" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
      rel="stylesheet"
    />

    <!-- Toastify CSS -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
    />
  </head>
  <body>
    <div class="container">
      <!-- Left Side -->
      <div class="left-side">
        <img src="{% static 'images/logo-desktop.png' %}" alt="Logo" />
      </div>

      <!-- Right Side -->
      <div class="right-side">
        <!-- Mobile Logo -->
        <div
          class="mobile-logo"
          style="display: none; text-align: center; margin-bottom: 20px"
        >
          <img
            src="{% static 'images/logo-mobile.png' %}"
            alt="Mobile Logo"
            style="max-width: 180px"
          />
        </div>

        <div class="form-container">
          <h2>Reset Your Password</h2>
          <p class="subtitle">
            Please enter your email address to receive password reset
            instructions.
          </p>

          {% if messages %}
          <div id="django-messages" style="display: none">
            {% for message in messages %}
            <div
              data-type="{{ message.tags }}"
              data-message="{{ message|escapejs }}"
            ></div>
            {% endfor %}
          </div>
          {% endif %}

          <form method="post" id="resetForm">
            {% csrf_token %}
            <input
              type="email"
              class="input-box"
              placeholder="Enter Email"
              name="email"
              id="email"
              required
            />
            <div class="error-message" id="emailError">
              {% if form.email.errors %} {% for error in form.email.errors %} {{
              error }} {% endfor %} {% endif %}
            </div>

            <div class="success-message" id="successMessage"></div>

            <button type="submit" class="send-btn" id="sendBtn">
              Send Reset Instructions
            </button>
          </form>

          <div class="terms">
            Remember your password?
            <a href="{% url 'login' %}">Back to Login</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Toastify JS -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/toastify-js"
    ></script>

    <!-- Toastify Utils -->
    <script src="{% static 'js/toastify-utils.js' %}"></script>

    <script>
      // Responsive logo toggle
      function handleLogo() {
        const mobileLogo = document.querySelector(".mobile-logo");
        const leftSide = document.querySelector(".left-side");
        if (window.innerWidth <= 768) {
          mobileLogo.style.display = "block";
          leftSide.style.display = "none";
        } else {
          mobileLogo.style.display = "none";
          leftSide.style.display = "block";
        }
      }
      window.addEventListener("resize", handleLogo);
      window.addEventListener("load", handleLogo);

      // Handle Django messages with Toastify
      document.addEventListener("DOMContentLoaded", function () {
        const messageContainer = document.getElementById("django-messages");
        if (messageContainer) {
          const messages = messageContainer.querySelectorAll(
            "div[data-type][data-message]"
          );
          messages.forEach(function (msgDiv) {
            const type = msgDiv.getAttribute("data-type") || "info";
            const message = msgDiv.getAttribute("data-message");
            window.ToastifyUtils.show(message, type);
          });
        }
      });

      // Form validation
      document
        .getElementById("resetForm")
        .addEventListener("submit", function (e) {
          const email = document.getElementById("email");
          const sendBtn = document.getElementById("sendBtn");

          if (!email.value.trim()) {
            e.preventDefault();
            window.ToastifyUtils.error("Please enter your email address.");
            return;
          }

          // Disable button and show loading state
          sendBtn.disabled = true;
          sendBtn.textContent = "Sending...";
        });

      // Clear error styling on focus
      document.getElementById("email").addEventListener("focus", function () {
        this.classList.remove("error");
        const errorMsg = document.getElementById("emailError");
        if (errorMsg) {
          errorMsg.style.display = "none";
        }
      });
    </script>
  </body>
</html>
