---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Card from "@/components/Card.astro";
import AlertBox from "@/components/AlertBox.astro";
import type { Level } from "@/lib/alert";

interface Props {
  title: string;
  level?: Level;
}

const { title, level } = Astro.props;
---

<BaseLayout title={title}>
  <div class="mx-auto flex h-dvh w-screen flex-col items-center justify-center">
    <Card title={title}>
      <slot />
    </Card>

    {"{% if !alert.is_empty() %}"}
    <AlertBox message={`{{ alert | escape("html") }}`} level={level} />
    {"{% endif %}"}
  </div>
</BaseLayout>
