{% include 'registration/header.html' %}
{% load static %}

<div class="container-xxl">
  <div class="authentication-wrapper authentication-basic container-p-y">
    <div class="authentication-inner">
      <div class="card">
        <div class="card-body">

          <!-- Logo -->
          <div class="app-brand justify-content-center mb-3">
            <a href="">
              {% if GET_PASS_IMAGE %}
                <img src="{% static GET_PASS_IMAGE %}"
                     class="com-logo"
                     style="width:150px">
              {% endif %}
            </a>
          </div>

          <h4 class="mb-2 text-center">Forgot Password</h4>

          <!-- Description -->
          <p class="mb-4 text-center text-muted" id="description-text">
            Enter your employee code and new password.
          </p>

          <!-- Django Messages -->
          {% if messages %}
            {% for message in messages %}
              <div class="alert
                  {% if 'success' in message.tags %}alert-success
                  {% elif 'danger' in message.tags %}alert-danger
                  {% elif 'warning' in message.tags %}alert-warning
                  {% elif 'info' in message.tags %}alert-info
                  {% endif %}
                  alert-dismissible fade show" role="alert">

                {{ message }}

                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
              </div>
            {% endfor %}
          {% endif %}

          <!-- Form -->
          <form method="POST" id="reset-form">
            {% csrf_token %}

            <div class="mb-3">
              <label class="form-label">Employee Code</label>
              <input type="text" class="form-control"
                     name="employee_code"
                     placeholder="Enter your employee code"
                     required autofocus>
            </div>

            <div class="mb-3">
              <label class="form-label">New Password</label>
              <input type="password" class="form-control"
                     name="new_password"
                     placeholder="Enter new password"
                     required>
            </div>

            <div class="mb-3">
              <label class="form-label">Confirm Password</label>
              <input type="password" class="form-control"
                     name="confirm_password"
                     placeholder="Confirm password"
                     required>
            </div>

            <button class="btn btn-primary w-100" type="submit">
              Reset Password
            </button>

          </form>

        </div>
      </div>
    </div>
  </div>
</div>

<!-- ===== Auto Expire Script ===== -->
<script>
    let tokenCreatedAt = parseInt("{{ token_created_at }}");
    let expirySeconds = 600; // 10 minutes

    let now = Math.floor(Date.now() / 1000);
    let remaining = expirySeconds - (now - tokenCreatedAt);

    if (remaining <= 0) {
        expireNow();
    } else {
        setTimeout(expireNow, remaining * 1000);
    }

    function expireNow() {

        // Hide form
        let form = document.getElementById("reset-form");
        if (form) form.style.display = "none";

        // Create expired message
        let alertBox = document.createElement("div");
        alertBox.className = "alert alert-danger text-center fw-bold mt-3";
        alertBox.style.borderRadius = "12px";

        alertBox.innerHTML = `
            <div>
                Time limit exceeded. Please request a new link.
            </div>
            <div class="mt-3">
                <a href="{% url 'home' %}" class="btn btn-primary px-4">
                    Back to Login
                </a>
            </div>
        `;

        // Insert below description text
        let description = document.getElementById("description-text");
        description.insertAdjacentElement("afterend", alertBox);
    }
</script>