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

const title = "Git Repositories";
---

<BaseLayout title={title}>
  <slot name="head" slot="head">
    <link rel="stylesheet" href="/styles/index.css" />
  </slot>

  <div class="content">
    <ul class="topics" id="repo-list">
      <li class="topic"></li>
    </ul>
    <div class="posts" id="posts"></div>
  </div>

  <script slot="scripts" type="module">
    const listEl = document.getElementById("repo-list");

    async function loadRepos() {
      try {
        const res = await fetch("https://git.barrettruth.com/api/repositories", { mode: "cors" });
        if (!res.ok) throw new Error("HTTP " + res.status);
        const data = await res.json();
        const repos = Array.isArray(data?.repositories) ? data.repositories : [];

        listEl.innerHTML = "";

        repos.sort((a, b) => a.localeCompare(b));

        for (const name of repos) {
          const label = name.replace(/\.git$/,"");
          const cls = `repo-${label}`;

          const li = document.createElement("li");
          li.className = `topic ${cls}`;

          const a = document.createElement("a");
          a.href = `${window.location.origin}/git/${label}`;
          a.textContent = label;
          a.setAttribute("data-topic", name);

          li.appendChild(a);
          listEl.appendChild(li);
        }
      } catch (_) {}
    }

    loadRepos();
  </script>
</BaseLayout>