{% extends "base.html" %}
{% block content %}
<form id="signup" class="max-w-sm mx-auto bg-white p-6 rounded-lg border space-y-4">
  <h2 class="text-lg font-semibold">Create account</h2>

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

  <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>

  <label class="block">
    <span class="block text-sm font-medium text-gray-700">Password</span>
    <input required type="password" minlength="8" name="password" autocomplete="new-password"
           class="mt-1 w-full rounded border-gray-300 px-3 py-2 border">
    <span class="block text-xs text-gray-500 mt-1">8 characters minimum.</span>
  </label>

  <p id="error" class="text-sm text-red-600 hidden"></p>

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

<div id="success-sent" class="hidden max-w-sm mx-auto bg-white p-6 rounded-lg border text-center">
  <h2 class="text-lg font-semibold mb-2">Check your inbox</h2>
  <p class="text-sm text-gray-600">
    We just sent you a verification link. Click it to confirm your email — once
    you do, an admin will be notified and approve your account.
  </p>
</div>

<div id="success-no-email" class="hidden max-w-sm mx-auto bg-white p-6 rounded-lg border text-center">
  <h2 class="text-lg font-semibold mb-2">Account created</h2>
  <p class="text-sm text-gray-600">
    We couldn't send a verification email — the address still needs to be
    confirmed before you can sign in. Reach out to your administrator and
    they can verify and approve you from the admin dashboard.
  </p>
</div>

<script>
const form = document.getElementById('signup');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  const btn = form.querySelector('button');
  const err = document.getElementById('error');
  btn.disabled = true;
  err.classList.add('hidden');
  try {
    const res = await fetch('/auth/signup', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(data),
    });
    if (!res.ok) {
      const body = await res.json().catch(() => ({}));
      err.textContent = body.detail || `Signup failed (${res.status})`;
      err.classList.remove('hidden');
    } else {
      const body = await res.json().catch(() => ({}));
      form.classList.add('hidden');
      // The signup response carries ``email_sent`` since #88 — when the
      // transport raised (Resend 403, bad key, etc.) we show an honest
      // "account created, ask your admin" panel instead of the
      // "check your inbox" copy that would gaslight the user.
      const panel = body.email_sent === false ? 'success-no-email' : 'success-sent';
      document.getElementById(panel).classList.remove('hidden');
    }
  } finally {
    btn.disabled = false;
  }
});
</script>
{% endblock %}