---
// Important that this is the first import so it can override cascade layers order.
import 'virtual:starlight/user-css';

// Starlight nested cascade layers definitions which specify the default order of internal layers.
import '../style/layers.css';

// Built-in CSS styles.
import '../style/props.css';
import '../style/reset.css';
import '../style/asides.css';
import '../style/util.css';
import 'virtual:starlight/optional-css';

import Banner from 'virtual:starlight/components/Banner';
import ContentPanel from 'virtual:starlight/components/ContentPanel';
import FallbackContentNotice from 'virtual:starlight/components/FallbackContentNotice';
import DraftContentNotice from 'virtual:starlight/components/DraftContentNotice';
import Footer from 'virtual:starlight/components/Footer';
import Head from 'virtual:starlight/components/Head';
import Header from 'virtual:starlight/components/Header';
import Hero from 'virtual:starlight/components/Hero';
import MarkdownContent from 'virtual:starlight/components/MarkdownContent';
import PageFrame from 'virtual:starlight/components/PageFrame';
import PageSidebar from 'virtual:starlight/components/PageSidebar';
import PageTitle from 'virtual:starlight/components/PageTitle';
import Sidebar from 'virtual:starlight/components/Sidebar';
import SkipLink from 'virtual:starlight/components/SkipLink';
import ThemeProvider from 'virtual:starlight/components/ThemeProvider';
import TwoColumnContent from 'virtual:starlight/components/TwoColumnContent';

import printHref from '../style/print.css?url&no-inline';

const { starlightRoute } = Astro.locals;

const pagefindEnabled =
	starlightRoute.entry.slug !== '404' &&
	!starlightRoute.entry.slug.endsWith('/404') &&
	starlightRoute.entry.data.pagefind !== false;

const htmlDataAttributes: DOMStringMap = { 'data-theme': 'dark' };
if (Boolean(starlightRoute.toc)) htmlDataAttributes['data-has-toc'] = '';
if (starlightRoute.hasSidebar) htmlDataAttributes['data-has-sidebar'] = '';
if (Boolean(starlightRoute.entry.data.hero)) htmlDataAttributes['data-has-hero'] = '';

const mainDataAttributes: DOMStringMap = {};
if (pagefindEnabled) mainDataAttributes['data-pagefind-body'] = '';
---

<html lang={starlightRoute.lang} dir={starlightRoute.dir} {...htmlDataAttributes}>
	<head>
		<Head />
		<style>
			html:not([data-has-toc]) {
				--sl-mobile-toc-height: 0rem;
			}
			html:not([data-has-sidebar]) {
				--sl-content-width: 67.5rem;
			}
			/* Add scroll padding to ensure anchor headings aren't obscured by nav */
			html {
				/* Additional padding is needed to account for the mobile TOC */
				scroll-padding-top: calc(1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height));
			}
			main {
				padding: var(--sl-main-pad);
			}
			@media (min-width: 50em) {
				[data-has-sidebar] {
					--sl-content-inline-start: var(--sl-sidebar-width);
				}
			}
			@media (min-width: 72em) {
				html {
					scroll-padding-top: calc(1.5rem + var(--sl-nav-height));
				}
			}
		</style>
		<ThemeProvider />
		<link rel="stylesheet" href={printHref} media="print" />
	</head>
	<body>
		<SkipLink />
		<PageFrame>
			<Header slot="header" />
			{starlightRoute.hasSidebar && <Sidebar slot="sidebar" />}
			<script src="./SidebarPersistState"></script>
			<TwoColumnContent>
				<PageSidebar slot="right-sidebar" />
				<main
					{...mainDataAttributes}
					lang={starlightRoute.entryMeta.lang}
					dir={starlightRoute.entryMeta.dir}
				>
					{/* TODO: Revisit how this logic flows. */}
					<Banner />
					{
						starlightRoute.entry.data.hero ? (
							<ContentPanel>
								<Hero />
								<MarkdownContent>
									<slot />
								</MarkdownContent>
								<Footer />
							</ContentPanel>
						) : (
							<>
								<ContentPanel>
									<PageTitle />
									{starlightRoute.entry.data.draft && <DraftContentNotice />}
									{starlightRoute.isFallback && <FallbackContentNotice />}
								</ContentPanel>
								<ContentPanel>
									<MarkdownContent>
										<slot />
									</MarkdownContent>
									<Footer />
								</ContentPanel>
							</>
						)
					}
				</main>
			</TwoColumnContent>
		</PageFrame>
	</body>
</html>
