---
// init i18n
import { l, t, astroI18n } from "astro-i18n";
astroI18n.init(Astro);

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

// New astro content collections
import { getCollection } from "astro:content";

// get all articles
const localizedArticles = await getCollection("articles", ({ data }) => {
	return data.lang === astroI18n.langCode && !data.draft;
});
// get all snippets
const localizedFragments = await getCollection("fragments", ({ data }) => {
	return data.lang === astroI18n.langCode && !data.draft;
});

const pageTitle = t("sitemap");
---

<BaseLayout pageTitle={pageTitle}>
	<section class="region">
		<h1>{t("sitemap")}</h1>
		<ul class="flow sitemap" role="list">
			<li>
				<h2>
					<a href={l("/")}>{t("accueil")}</a>
				</h2>
			</li>
			<li>
				<h2>
					<a href={l("/articles")}>{t("article.titre")}</a>
				</h2>
				<ul>
					{
						localizedArticles.map((article) => (
							<li>
								<a href={l("/articles/[slug]", { slug: article.slug })}>
									{article.data.title}
								</a>
							</li>
						))
					}
				</ul>
			</li>
			<li>
				<h2>
					<a href={l("/fragments")}>{t("fragments.titre")}</a>
				</h2>
				<ul>
					{
						localizedFragments.map((fragment) => (
							<li>
								<a href={l("/fragments/[slug]", { slug: fragment.slug })}>
									{fragment.data.title}
								</a>
							</li>
						))
					}
				</ul>
			</li>
		</ul>
	</section>
</BaseLayout>

<style>
	/* :link {
  text-decoration: underline;
}
:link:hover {
  text-decoration: none;
} */
	h2 {
		text-transform: capitalize;
	}

	.sitemap * + * {
		margin-block-start: 20px;
	}
</style>