{% extends "base.html" %}
{% block title %}Login — metal-cdn{% endblock %}
{% block content %}
<section class="hero">
  <p class="eyebrow">account</p>
  <h1>Login</h1>
  <p class="lede">Session cookie for the browse UI; use API keys for CI publish.</p>
</section>
<form id="login-form" class="auth-form">
  <label>Email <input type="email" name="email" required autocomplete="username" /></label>
  <label>Password <input type="password" name="password" required minlength="8" autocomplete="current-password" /></label>
  <button type="submit">Sign in</button>
  <p id="login-msg" class="muted" role="status"></p>
</form>
<script>
  const form = document.getElementById("login-form");
  const msg = document.getElementById("login-msg");
  const apiBase = "{{ base_path }}";
  form.addEventListener("submit", async (ev) => {
    ev.preventDefault();
    msg.textContent = "";
    const body = {
      email: form.email.value,
      password: form.password.value,
    };
    const res = await fetch(apiBase + "/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      credentials: "same-origin",
      body: JSON.stringify(body),
    });
    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      msg.textContent = err.detail || "login failed";
      return;
    }
    // Prime CSRF for subsequent cookie-authenticated POSTs from the UI.
    await fetch(apiBase + "/auth/csrf", { credentials: "same-origin" });
    const params = new URLSearchParams(window.location.search);
    const next = params.get("next");
    window.location.href = next && next.startsWith(apiBase || "/") ? next : (apiBase + "/channels/lead");
  });
</script>
{% endblock %}