{% extends "base.html" %}
{% block content %}
<form id="forgot" class="max-w-sm mx-auto bg-white p-6 rounded-lg border space-y-4">
  <h2 class="text-lg font-semibold">Reset your password</h2>
  <p class="text-sm text-gray-600">
    Enter your email and we'll send a reset link if there's an account
    on file. (We don't say whether the address is registered — that
    would leak who has accounts here.)
  </p>

  <label class="block">
    <span class="block text-sm font-medium text-gray-700">Email</span>
    <input required type="email" name="email" autocomplete="email"
           class="mt-1 w-full rounded border-gray-300 px-3 py-2 border">
  </label>

  <button type="submit"
          class="w-full rounded bg-black text-white py-2 font-medium disabled:opacity-50">
    Send reset link
  </button>
</form>

<div id="sent" class="hidden max-w-sm mx-auto bg-white p-6 rounded-lg border space-y-2">
  <h2 class="text-lg font-semibold">Check your inbox</h2>
  <p class="text-sm text-gray-600">
    If <span id="sent-email"></span> matches a registered account, a
    reset link is on its way. The link is valid for one hour.
  </p>
  <p class="text-sm">
    <a href="/login" class="text-gray-500 hover:text-black underline">
      Back to sign in
    </a>
  </p>
</div>

<script>
const form = document.getElementById('forgot');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  const btn = form.querySelector('button');
  btn.disabled = true;
  try {
    // /auth/forgot-password always returns 202 — no email enumeration.
    // We mirror that no-information stance on the success card.
    await fetch('/auth/forgot-password', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    });
    document.getElementById('sent-email').textContent = data.email;
    form.classList.add('hidden');
    document.getElementById('sent').classList.remove('hidden');
  } finally {
    btn.disabled = false;
  }
});
</script>
{% endblock %}