---
import BasicLayout from "@/layouts/BasicLayout.astro";
import distroQuizDialogs from "@/data/distroquiz";
import { getRelativeLocaleUrl } from "astro:i18n";
import fedoraDialogs from "@/data/distro/fedora/fedora";
import { getCollection } from "astro:content";

const docs = await getCollection("distroGuide");
---

<BasicLayout title="Table of Contents">
	<main class="mx-16 my-8">
		<details id="distroquiz">
			<summary>distroquiz</summary>
			<ul>
				{
					distroQuizDialogs.map((v, i) => (
						<li>
							<a
								href={getRelativeLocaleUrl(
									"en",
									`distroquiz/${i}`
								)}
							>
								{v.title}
							</a>
						</li>
					))
				}
			</ul>
		</details>
		<details id="fedora">
			<summary>Fedora Linux</summary>
			<details id="fedoraWorkstation">
				<summary>Fedora Workstation</summary>
				<ul>
					{
						docs
							.filter((v) => {
								const index = v.id.substring(19);
								return !Number.isNaN(parseInt(index));
							})
							.map((v, i) => (
								<li>
									<a
										href={getRelativeLocaleUrl(
											"en",
											`distro/${v.id}`
										)}
									>
										{v.data.title}
									</a>
								</li>
							))
					}
				</ul>
				<details id="fedoraWorkstationInstall">
					<summary>Installation</summary>
					<ul>
						{
							docs
								.filter((v) => {
									const index = v.id.substring(27);
									return !Number.isNaN(parseInt(index));
								})
								.map((v, i) => (
									<li>
										<a
											href={getRelativeLocaleUrl(
												"en",
												`distro/${v.id}`
											)}
										>
											{v.data.title}
										</a>
									</li>
								))
						}
					</ul>
				</details>
				<details id="fedoraWorkstationAfterInstall">
					<summary>After Installation</summary>
					<ul>
						{
							docs
								.filter((v) => {
									const index = v.id.substring(32);
									return !Number.isNaN(parseInt(index));
								})
								.map((v, i) => (
									<li>
										<a
											href={getRelativeLocaleUrl(
												"en",
												`distro/${v.id}`
											)}
										>
											{v.data.title}
										</a>
									</li>
								))
						}
					</ul>
				</details>
			</details>
			<ul>
				{
					fedoraDialogs.map((v, i) => (
						<li>
							<a
								href={getRelativeLocaleUrl(
									"en",
									`distro/fedora/${i}`
								)}
							>
								{v.title}
							</a>
						</li>
					))
				}
			</ul>
		</details>
	</main>
</BasicLayout>

<style>
	@reference "@/styles/global.css";

	ul {
		@apply list-disc ps-8;
	}

	a {
		@apply border-b border-b-gray-400 dark:border-b-slate-400 hover:dark:text-sky-200 hover:text-sky-900 transition-colors;
	}

	details {
		@apply px-4 py-2 my-2 border dark:border-slate-700 border-gray-300 rounded;
	}
</style>