---
import MarkdownLayout from "../../layouts/MarkdownLayout.astro";
import { getCollection, getEntry } from "astro:content";
import type { CollectionEntry } from "astro:content";
import DiaryNavBar from "../../components/DiaryNav/DiaryNavBar.astro";

export async function getStaticPaths() {
  const collectionData = await getCollection("diaryMainPages");
  return collectionData.map((entry) => ({
    params: { diary: entry.slug },
  }));
}

interface Props {
    diary: CollectionEntry<"diaryMainPages">["slug"];
}

const { diary} = Astro.params;
const diaryMain = await getEntry("diaryMainPages", diary);
const collectionBasePath = `/blog/${diary}`;

const diaryPages = (await getCollection(diary)).sort((a, b) => a.data.sorting - b.data.sorting);

const { Content } = await diaryMain.render();

const moreLinks = [];
if (diaryMain.data.relatedWebsite) {
  moreLinks.push({
    href: diaryMain.data.relatedWebsite,
    icon: "mdi:web",
  });
}
if (diaryMain.data.repository) {
  moreLinks.push({
    href: diaryMain.data.repository,
    icon: "bi:git",
  });
}
---

<MarkdownLayout title={diaryMain.data.site_title || diaryMain.data.title} slug={diaryMain.slug} srcPath={`diaryMainPages/${diaryMain.id}`} moreLinks={moreLinks}>
    <Content />

    <h2>Pages</h2>
    <ol>
      { diaryPages.map((page) => <li><a href={collectionBasePath + "/" + page.slug}>{page.data.title}</a></li>) }
    </ol>

    <DiaryNavBar collectionName={diary} slot="footer-nav" />
</MarkdownLayout>