---
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 CONFIG from '../config';
import type { MarkdownHeading } from 'astro';
import Footer from '../components/Footer/Footer.astro';

type Props = {
	frontmatter: CONFIG.Frontmatter;
	headings: MarkdownHeading[];
};

const { frontmatter, headings } = Astro.props as Props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const currentPage = Astro.url.pathname;
const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
---

<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial">
	<head>
		<HeadCommon />
		<HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} />
		<title>
			{frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}
		</title>
		<style>
			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;
			}
		</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>
