<script lang="ts">
  import EntityDetailContent from '$lib/components/EntityDetailContent.svelte'
  import * as Sheet from '$lib/components/ui/sheet'

  let { slug, open = $bindable(false) }: { slug: string | null; open?: boolean } = $props()
</script>

<Sheet.Root bind:open>
  <Sheet.Content side="right" class="w-full p-0 sm:max-w-2xl">
    <Sheet.Header class="sr-only">
      <Sheet.Title>{slug ?? 'Entity detail'}</Sheet.Title>
      <Sheet.Description>Entity detail panel</Sheet.Description>
    </Sheet.Header>
    {#if slug}
      <EntityDetailContent {slug} />
    {/if}
  </Sheet.Content>
</Sheet.Root>
