admin-sections.html

<!DOCTYPE html>
<html lang="en">
<head>
<style id="auth-gate">html{visibility:hidden}</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smitten — Sections</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Caveat:wght@600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/admin.css">

<script src="assets/js/supabase-config.js"></script>
<script src="assets/js/vendor/supabase.js"></script>
<script src="assets/js/supabase-client.js"></script>
<script src="assets/js/auth.js"></script>
<script src="assets/js/ui-helpers.js"></script>
<script src="assets/js/api.js"></script>
<script src="assets/js/admin-shell.js"></script>
</head>
<body>
<script>AUTH.requireAdmin();</script>
<svg style="position:absolute;width:0;height:0;"><defs>
  <symbol id="d-heart" viewBox="0 0 100 92"><path d="M50 88 C15 62 4 40 12 24 C19 10 40 8 50 24 C60 8 81 10 88 24 C96 40 85 62 50 88 Z"/></symbol>
</defs></svg>
<aside>
  <div class="brand"><svg viewBox="0 0 100 92" style="width:18px;height:18px;stroke:var(--pink);stroke-width:8;fill:none;"><use href="#d-heart"/></svg>Smitten Admin</div>
  <div class="god-badge">✦ Super Admin · Full Access</div>
  <div class="nav-group">
    <div class="nav-label">Overview</div>
    <a class="nav-item" href="admin.html"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="8" height="8" rx="2" stroke="#3A2B39" stroke-width="2"/><rect x="13" y="3" width="8" height="8" rx="2" stroke="#3A2B39" stroke-width="2"/><rect x="3" y="13" width="8" height="8" rx="2" stroke="#3A2B39" stroke-width="2"/><rect x="13" y="13" width="8" height="8" rx="2" stroke="#3A2B39" stroke-width="2"/></svg> Dashboard</a>
  </div>
  <div class="nav-group">
    <div class="nav-label">Manage</div>
    <a class="nav-item" href="admin-users.html"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke="#7A6B78" stroke-width="2"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7" stroke="#7A6B78" stroke-width="2"/></svg> Users</a>
    <a class="nav-item" href="admin-invitations.html"><svg viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="3" stroke="#7A6B78" stroke-width="2"/><path d="M3 10h18" stroke="#7A6B78" stroke-width="2"/></svg> Notes / Invitations</a>
    <a class="nav-item" href="admin-templates.html"><svg viewBox="0 0 24 24" fill="none"><path d="M4 19l1-9 7-7 7 7-1 9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" stroke="#7A6B78" stroke-width="2"/></svg> Templates</a>
    <a class="nav-item active" href="admin-sections.html"><svg viewBox="0 0 24 24" fill="none"><rect x="4" y="4" width="7" height="7" rx="2" stroke="#7A6B78" stroke-width="2"/><rect x="13" y="4" width="7" height="7" rx="2" stroke="#7A6B78" stroke-width="2"/><rect x="4" y="13" width="7" height="7" rx="2" stroke="#7A6B78" stroke-width="2"/><rect x="13" y="13" width="7" height="7" rx="2" stroke="#7A6B78" stroke-width="2"/></svg> Sections</a>
  </div>
  <div class="nav-group">
    <div class="nav-label">Trust & Safety</div>
    <a class="nav-item" href="admin-reports.html"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3l8 3.5v5c0 5-3.4 8.7-8 9.5-4.6-.8-8-4.5-8-9.5v-5L12 3z" stroke="#7A6B78" stroke-width="2"/></svg> Reports</a>
    <a class="nav-item" href="admin-audit.html"><svg viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h10" stroke="#7A6B78" stroke-width="2" stroke-linecap="round"/></svg> Audit Log</a>
  </div>
  <div class="nav-group">
    <div class="nav-label">Commerce</div>
    <a class="nav-item" href="admin-orders.html"><svg viewBox="0 0 24 24" fill="none"><circle cx="9" cy="20" r="1.4" fill="#7A6B78"/><circle cx="18" cy="20" r="1.4" fill="#7A6B78"/><path d="M2 3h3l2.4 12.2a2 2 0 0 0 2 1.8h8.6a2 2 0 0 0 2-1.6L22 8H6" stroke="#7A6B78" stroke-width="2" stroke-linecap="round"/></svg> Orders</a>
    <a class="nav-item" href="admin-payments.html"><svg viewBox="0 0 24 24" fill="none"><rect x="2" y="6" width="20" height="13" rx="3" stroke="#7A6B78" stroke-width="2"/><path d="M2 10h20" stroke="#7A6B78" stroke-width="2"/></svg> Payments</a>
    <a class="nav-item" href="admin-analytics.html"><svg viewBox="0 0 24 24" fill="none"><path d="M4 19V9M10 19V5M16 19v-7M22 19V3" stroke="#7A6B78" stroke-width="2" stroke-linecap="round"/></svg> Analytics</a>
  </div>
  <div class="nav-group">
    <div class="nav-label">System</div>
    <a class="nav-item" href="admin-settings.html"><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="#7A6B78" stroke-width="2"/><path d="M19 12a7 7 0 0 0-.2-1.6l2-1.5-2-3.4-2.3.9a7 7 0 0 0-2.8-1.6L13.3 2h-2.6l-.4 2.8a7 7 0 0 0-2.8 1.6l-2.3-.9-2 3.4 2 1.5A7 7 0 0 0 5 12c0 .5.1 1.1.2 1.6l-2 1.5 2 3.4 2.3-.9c.8.7 1.8 1.3 2.8 1.6l.4 2.8h2.6l.4-2.8a7 7 0 0 0 2.8-1.6l2.3.9 2-3.4-2-1.5c.1-.5.2-1.1.2-1.6z" stroke="#7A6B78" stroke-width="1.6"/></svg> Settings</a>
  </div>
  <div style="margin-top:auto;padding:14px 6px 4px;">
    <a href="dashboard.html" class="nav-item" style="color:var(--ink-soft);">← Back to app</a>
  </div>
</aside>
<main>

  <header class="top">
    <h1>🧩 Section definitions</h1>
    <div class="topright"><button class="pill-btn pink" id="new-sec-btn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg> New section type</button><div class="avatar"></div></div>
  </header>
  <div class="panel">
    <div class="panel-head"><h3>Reusable section types</h3></div>
    <table>
      <thead><tr><th>Section</th><th>Config fields</th><th>Used in templates</th><th>Actions</th></tr></thead>
      <tbody id="sec-tbody"><tr><td colspan="4" style="text-align:center;padding:36px;color:var(--ink-soft);">⏳ Loading…</td></tr></tbody>
    </table>
  </div>

</main>
<script>
let SECTION_DEFS = [];

function render() {
  const tbody = document.getElementById("sec-tbody");
  if (!SECTION_DEFS.length) { tbody.innerHTML = UI.emptyRow(4, "No section types yet."); return; }
  tbody.innerHTML = SECTION_DEFS.map(d => `
    <tr data-id="${d.id}">
      <td class="name">${UI.esc(d.label)}${d.is_active ? "" : ` <span class="tag draft">inactive</span>`}</td>
      <td>${(d.config_schema?.fields || []).map(UI.esc).join(", ") || "—"}</td>
      <td>${d.template_sections?.[0]?.count ?? 0}</td>
      <td class="row-actions">
        <button class="pill-btn ghost sm" data-action="edit" data-id="${d.id}">Edit</button>
        <button class="pill-btn ghost sm" data-action="toggle" data-id="${d.id}" data-active="${d.is_active}">${d.is_active ? "Deactivate" : "Activate"}</button>
        <button class="icon-btn danger" data-action="delete" data-id="${d.id}" title="Delete"><svg viewBox="0 0 24 24" fill="none"><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke="#E15B4E" stroke-width="2" stroke-linecap="round"/></svg></button>
      </td>
    </tr>`).join("");
}

async function load() {
  try {
    SECTION_DEFS = await API.admin.listSectionDefinitions();
    render();
  } catch (err) {
    document.getElementById("sec-tbody").innerHTML = UI.errorRow(4, UI.friendlyError(err));
  }
}
load();

document.getElementById("sec-tbody").addEventListener("click", async (e) => {
  const btn = e.target.closest("[data-action]");
  if (!btn) return;
  const id = btn.dataset.id;
  const def = SECTION_DEFS.find(d => d.id === id);
  try {
    if (btn.dataset.action === "toggle") {
      await API.admin.updateSectionDefinition(id, { is_active: btn.dataset.active !== "true" });
      UI.toast("Updated", "success");
      load();
    } else if (btn.dataset.action === "delete") {
      if (!confirm(`Delete section type "${def.label}"? Templates using it will keep the data, but this type won't be selectable anymore.`)) return;
      await API.admin.deleteSectionDefinition(id);
      UI.toast("Deleted", "success");
      load();
    } else if (btn.dataset.action === "edit") {
      const label = prompt("Section label:", def.label);
      if (label === null) return;
      const fieldsCsv = prompt("Config fields (comma-separated):", (def.config_schema?.fields || []).join(", "));
      const fields = (fieldsCsv || "").split(",").map(s => s.trim()).filter(Boolean);
      await API.admin.updateSectionDefinition(id, { label: label.trim() || def.label, config_schema: { fields } });
      UI.toast("Updated", "success");
      load();
    }
  } catch (err) {
    UI.toast(UI.friendlyError(err), "error");
  }
});

document.getElementById("new-sec-btn").addEventListener("click", async () => {
  const label = prompt("New section type label (e.g. \"Playlist\"):");
  if (!label) return;
  const key = label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/(^_|_$)/g, "");
  const fieldsCsv = prompt("Config fields (comma-separated, e.g. \"title, url\"):", "");
  const fields = (fieldsCsv || "").split(",").map(s => s.trim()).filter(Boolean);
  try {
    await API.admin.createSectionDefinition({ key, label: label.trim(), config_schema: { fields }, is_active: true });
    UI.toast("Section type created", "success");
    load();
  } catch (err) {
    UI.toast(UI.friendlyError(err), "error");
  }
});
</script>
</body>
</html>