---
import HeadCommon from "../components/HeadCommon.astro";
import HeadSEO from "../components/HeadSEO.astro";
import Header from "../components/Header/Header.astro";
import PageContent from "../components/PageContent/PageContent.astro";
import LeftSidebar from "../components/LeftSidebar/LeftSidebar.astro";
import RightSidebar from "../components/RightSidebar/RightSidebar.astro";
import * as CONSTS from "../consts";
import type { MarkdownHeading } from "astro";
import Footer from "../components/Footer/Footer.astro";
import { getTitle } from "../util";

type Props = {
	frontmatter: CONSTS.Frontmatter;
	headings: MarkdownHeading[];
	file: string;
};

const { frontmatter, headings } = Astro.props as Props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const currentPage = Astro.url.pathname.replace(/\/$/, "");
const currentFile = Astro.props.file.split(/\/(?=src\/pages\/)/)[1];
const githubEditUrl = `${CONSTS.GITHUB_EDIT_URL}/${currentFile}`;
---

<html
	dir={frontmatter.dir ?? "ltr"}
	lang={frontmatter.lang ?? "en-us"}
	class="initial"
>
	<head>
		<HeadCommon />
		<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
		<title>{getTitle(frontmatter)}</title>
		<style is:global>
			body {
				width: 100%;
				display: grid;
				grid-template-rows: var(--theme-navbar-height) 1fr;
				--gutter: 0.5rem;
				--doc-padding: 2rem;
			}

			.layout {
				display: grid;
				grid-auto-flow: column;
				grid-template-columns:
					minmax(var(--gutter), 1fr)
					minmax(0, var(--max-width))
					minmax(var(--gutter), 1fr);
				overflow-x: hidden;
			}

			.grid-sidebar {
				height: 100vh;
				position: sticky;
				top: 0;
				padding: 0;
			}

			#grid-left {
				position: fixed;
				background-color: var(--theme-bg);
				z-index: 10;
				display: none;
			}

			#grid-main {
				padding: var(--doc-padding) var(--gutter);
				grid-column: 2;
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			#grid-right {
				display: none;
			}

			@media (min-width: 50em) {
				.layout {
					overflow: initial;
					grid-template-columns: 20rem minmax(0, var(--max-width));
					gap: 1em;
				}

				#grid-left {
					display: flex;
					padding-left: 2rem;
					position: sticky;
					grid-column: 1;
				}
			}

			@media (min-width: 72em) {
				.layout {
					grid-template-columns: 20rem minmax(0, var(--max-width)) 18rem;
					padding-left: 0;
					padding-right: 0;
					margin: 0 auto;
				}

				#grid-right {
					grid-column: 3;
					display: flex;
				}
			}
		</style>
		<style is:global>
			.layout > * {
				width: 100%;
				height: 100%;
			}

			.mobile-sidebar-toggle {
				overflow: hidden;
			}

			.mobile-sidebar-toggle #grid-left {
				display: block;
				top: 2rem;
			}

			table,
			pre {
				padding-right: calc(var(--padding-inline) * 2);
				margin-left: calc(var(--padding-inline) * -1);
				margin-right: calc(var(--padding-inline) * -1);
			}

			@media (min-width: 37.75em) {
				pre {
					--padding-inline: 1.25rem;
					border-radius: 8px;
					margin-left: 0;
					margin-right: 0;
				}
			}
		</style>
	</head>

	<body>
		<Header currentPage={currentPage} />
		<main class="layout">
			<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
				<LeftSidebar currentPage={currentPage} />
			</aside>
			<div id="grid-main">
				<PageContent
					frontmatter={frontmatter}
					headings={headings}
					githubEditUrl={githubEditUrl}
				>
					<slot />
				</PageContent>
			</div>
			<aside id="grid-right" class="grid-sidebar" title="Table of Contents">
				<RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
			</aside>
		</main>
		<Footer path={currentFile} />
	</body>
</html>
