<!doctype html>
<html lang="en" class="h-full">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Reset Password - MCP Gateway</title>
    {% if ui_airgapped %}
    <script src="{{ root_path }}/static/vendor/tailwindcss/tailwind.min.js"></script>
    {% else %}
    <script src="https://cdn.tailwindcss.com"></script>
    {% endif %}
  </head>
  <body class="h-full bg-gray-50 dark:bg-gray-900">
    <div class="min-h-screen flex items-center justify-center px-4">
      <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
        <h1 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Reset Password</h1>

        {% if token_valid %}
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
          Enter a new password. Minimum length: {{ password_min_length }}.
        </p>

        <div
          id="error-message"
          class="mb-4 p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm hidden"
        ></div>

        <form method="post" action="{{ root_path }}/admin/reset-password/{{ token }}" class="space-y-4">
          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">New password</label>
            <input
              id="password"
              name="password"
              type="password"
              autocomplete="off"
              required
              minlength="{{ password_min_length }}"
              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
            />
          </div>
          <div>
            <label for="confirm_password" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Confirm password</label>
            <input
              id="confirm_password"
              name="confirm_password"
              type="password"
              autocomplete="off"
              required
              minlength="{{ password_min_length }}"
              class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-white"
            />
          </div>
          <button
            type="submit"
            class="w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg"
          >
            Reset Password
          </button>
        </form>
        {% else %}
        <div class="p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm mb-4">
          {{ token_error or "This reset link is invalid." }}
        </div>
        <a href="{{ root_path }}/admin/forgot-password" class="text-sm text-indigo-600 hover:text-indigo-800">
          Request a new reset link
        </a>
        {% endif %}
      </div>
    </div>

    <script>
      const params = new URLSearchParams(window.location.search);
      const error = params.get("error");
      if (error) {
        const target = document.getElementById("error-message");
        if (target) {
          let message = "Could not reset password.";
          switch (error) {
            case "missing_fields":
              message = "Please provide and confirm your new password.";
              break;
            case "password_mismatch":
              message = "Passwords do not match.";
              break;
            case "server_error":
              message = "Server error. Please try again later.";
              break;
            default:
              message = decodeURIComponent(error);
          }
          target.textContent = message;
          target.classList.remove("hidden");
        }
      }
    </script>
  </body>
</html>
