---
import AdminLayout from "../../../layouts/AdminLayout.astro";
---

<AdminLayout title="Projects">
  <h1>Projects</h1>
  <p class="lead">Add or replace gallery images and Instagram reels for each project.</p>

  <div id="list" style="display:flex;flex-direction:column">Loading…</div>

  <style>
    .prow { display:flex; align-items:center; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--rule);
      text-decoration:none; color:inherit; }
    .prow:last-child { border-bottom:1px solid var(--rule); }
    .prow .t { font-family:var(--serif); font-size:1.25rem; }
    .prow .meta { margin-left:auto; display:flex; gap:1.25rem; font-family:var(--mono); font-size:.68rem;
      letter-spacing:.06em; color:var(--ink4); }
    .prow .meta .on { color:var(--seal); }
    .prow:hover .t { text-decoration:underline; }
  </style>

  <script>
    const list = document.getElementById("list");
    (async () => {
      try {
        const r = await fetch("/api/adminprojects/list", { credentials: "same-origin" });
        const d = await r.json();
        if (!d?.data?.projects) { list.textContent = "Couldn't load projects."; return; }
        list.innerHTML = "";
        for (const p of d.data.projects) {
          const a = document.createElement("a");
          a.href = "/admin/projects/edit?slug=" + encodeURIComponent(p.slug);
          a.className = "prow";
          a.innerHTML =
            `<span class="t">${p.title}</span>
             <span class="meta">
               <span class="${p.galleryFilled ? "on" : ""}">${p.galleryFilled}/${p.gallery} images</span>
               <span class="${p.hasInstagram ? "on" : ""}">${p.hasInstagram ? "Reel ✓" : "No reel"}</span>
             </span>`;
          list.appendChild(a);
        }
      } catch { list.textContent = "Couldn't load projects."; }
    })();
  </script>
</AdminLayout>