---
    import Divider from "../components/misc/Divider.astro";
    import Layout from "./Layout.astro";
    import Nav from "../components/nav/Nav.astro";
    const { frontmatter } = Astro.props;
---

<Layout>
    <Nav/>
    <main class="z-10 flex flex-col justify-center w-5/6 mx-auto mt-4 mb-6 sm:w-5/6 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 overflow-hidden bg-gray-500 rounded-lg sm:pt-0 rounded-xl bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-10">
        <div class="relative mb-4">
            <img class="object-cover aspect-video rounded-xl max-h-[50vh] w-full" src={frontmatter.image} alt=""
                draggable="false" />
            <a href={frontmatter.imageattr} class="absolute bottom-0 right-0 h-[24px]">
                <span class="material-symbols-outlined opacity-25 mr-[4px]">link</span>
            </a>
        </div>
        <p class="my-2 text-5xl px-2 font-bold text-white">{frontmatter.title}</p>
        <p class="text-gray-200 px-2">{frontmatter.date}</p>
        <Divider />
        <!-- Render our markdown with the normal header styling and some extra padding. -->
        <style is:inline>
            .astro-code {
                margin-bottom: 1rem;
                padding: 8px;
            }

            .prose p>img{
                margin: auto;
            }
        </style>
        <article id="article" class="max-w-full prose text-white px-2 pb-2">
            <slot />
        </article>
    </main>
</Layout>