---
import Layout from './Layout.astro';
// import { markdown } from '@astropub/md';
import markdown from 'markdown-wasm';
import { getCollection } from "astro:content";
import TableOfContents from '../components/TableOfContents.astro';

import '../styles/markdown.css';

const { frontmatter, headings, collection } = Astro.props;

const items = collection ? await getCollection(collection) : [];

const description = await markdown.parse(frontmatter.description);

---

<Layout title={frontmatter.title}>
    <div class="wrapper">
        <div class="main">
            <div class="content">
                {headings && (
                    <aside class="toc">
                        <TableOfContents headings={headings} />
                    </aside>
                )}
                <div class="markdown-body">
                    <h1>{frontmatter.title}</h1>
                    <h3><Fragment set:html={description}/></h3>
                    <slot/>
                </div>
            </div>
        </div>
    </div>
    <style>
        .wrapper {
            display: flex;
            /* max-width: 1000px; */
        }

        .wrapper .main {
            width: 100vw;
        }

        .wrapper .main .content {
            display: flex;
            /* width: fit-content; */
            /* max-width: 100%; */
            order: 1;
            margin: 20px 0 0 20px;
        }

        .wrapper .main aside {
            display: flex;
            align-items: center;
            order: 2;
            width: fit-content;
            max-width: 25%;
            margin: 0 auto;
        }

        .wrapper .markdown-body {
            /* margin: 10px 20px; */
            max-width: 75%;
        }

        .wrapper .toc {
            display: flex;
            flex-direction: column;
        }

        @media only screen and (max-width: 750px) {
            .wrapper .sidebar {
                transform: translateX(-80%);
            }

            .wrapper .main {
                padding-inline-start: calc(400px * 0.2);
            }
        }
    </style>
</Layout>