{% extends "base.html" %}

{% block title %}Change password — ai-memory{% endblock %}

{% block header_actions %}{% endblock %}

{% block content %}
<div class="max-w-md">
  <h1 class="text-2xl font-bold text-slate-900 dark:text-slate-100">Change password</h1>
  <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">You must set a new password before using the wiki.</p>

  <p id="auth-error" class="mt-4 hidden text-sm text-amber-800 dark:text-amber-300" role="alert"></p>

  <form id="change-password-form" class="mt-4 space-y-3" autocomplete="on" data-next="{{ next }}">
    <div>
      <label for="current_password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Current password</label>
      <input
        id="current_password"
        name="current_password"
        type="password"
        autocomplete="current-password"
        required
        class="w-full rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
    </div>
    <div>
      <label for="new_password" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">New password</label>
      <input
        id="new_password"
        name="new_password"
        type="password"
        autocomplete="new-password"
        required
        minlength="12"
        class="w-full rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
    </div>
    <div>
      <label for="new_password_confirmation" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Confirm new password</label>
      <input
        id="new_password_confirmation"
        name="new_password_confirmation"
        type="password"
        autocomplete="new-password"
        required
        minlength="12"
        class="w-full rounded-md border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-3 py-2 text-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
    </div>
    <button type="submit" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
      Update password
    </button>
  </form>
</div>
<script>
(function () {
  var form = document.getElementById("change-password-form");
  var err = document.getElementById("auth-error");
  var next = form.getAttribute("data-next") || "/";
  var basePath = document
    .querySelector('meta[name="ai-memory-base-path"]')
    ?.getAttribute("content") || "";
  {% include "_js_cookie.html" %}
  function showError(msg) {
    err.textContent = msg;
    err.classList.remove("hidden");
  }
  form.addEventListener("submit", function (e) {
    e.preventDefault();
    err.classList.add("hidden");
    var body = {
      current_password: document.getElementById("current_password").value,
      new_password: document.getElementById("new_password").value,
      new_password_confirmation: document.getElementById("new_password_confirmation").value
    };
    fetch(basePath + "/auth/password", {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
        "X-CSRF-Token": decodeURIComponent(cookie("ai_memory_csrf") || "")
      },
      body: JSON.stringify(body)
    }).then(function (resp) {
      return resp.json().catch(function () { return {}; }).then(function (json) {
        if (!resp.ok) {
          showError((json && json.error) || ("Password change failed (" + resp.status + ")"));
          return;
        }
        location.assign(next);
      });
    }).catch(function () {
      showError("Network error — try again.");
    });
  });
})();
</script>
{% endblock %}