---
import MoreMenu from '../RightSidebar/MoreMenu.astro';
import TableOfContents from '../RightSidebar/TableOfContents.tsx';
import { getLanguageFromURL } from '../../util.ts';
import { SIDEBAR } from '../../config.ts';
const { content, githubEditUrl, currentPage } = Astro.props;
const title = content.title;
const headers = content.astro?.headers;
const langCode = getLanguageFromURL(currentPage);
const links = SIDEBAR[langCode].filter(
	(x) => x.link && typeof x.header === 'undefined'
);
// handle cases with a trailing slash or not
const index = links.findIndex(
	(x) => `/${x.link}/` === currentPage || `/${x.link}` === currentPage
);
const next =
	index !== -1 ? (index === links.length - 1 ? null : links[index + 1]) : null;
const previous = index !== -1 ? (index === 0 ? null : links[index - 1]) : null;
---

<article id="article" class="content">
	<section class="main-section">
		<h1 class="content-title" id="overview">{title}</h1>
		{headers && (
			<nav class="block sm:hidden">
				<TableOfContents client:media="(max-width: 50em)" headers={headers} />
			</nav>
		)}
		<slot />
	</section>
	<nav class="block sm:hidden">
		<MoreMenu editHref={githubEditUrl} />
	</nav>
	{(previous || next) && (
		<aside>
			{previous && (
				<div>
					Previous Article:{' '}
					<a rel="prev" href={new URL(previous.link, Astro.site).pathname}>
						{previous.text}
					</a>
				</div>
			)}
			{next && (
				<div>
					Next Article:{' '}
					<a rel="next" href={new URL(next.link, Astro.site).pathname}>
						{next.text}
					</a>
				</div>
			)}
		</aside>
	)}
</article>

<style>
	.content {
		padding: 0;
		max-width: 75ch;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.content > section {
		margin-bottom: 4rem;
	}
	.block {
		display: block;
	}

	@media (min-width: 50em) {
		.sm\:hidden {
			display: none;
		}
	}
</style>