---
import { render } from "astro:content";
import { getCollection } from "astro:content";
import Main from "../../layouts/MainLayout.astro";
import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
import Panel from "../../layouts/Panel.astro";

export const getStaticPaths = async () => {
  const posts = await getCollection("blog");
  return posts.map((post) => ({
    params: { slug: post.id },
    props: post,
  }));
};

const post = Astro.props;
const { Content } = await render(post);
---

<Main title={post.data.title}>
  <TransFlagPanel>
    <h1>{post.data.title}</h1>
  </TransFlagPanel>
  {
    post.data.wantsPanel ? (
      <Panel>
        <Content />
      </Panel>
    ) : (
      <Content />
    )
  }
</Main>
