<script lang="ts">
  import ContentRows from '$lib/components/ContentRows.svelte';
  import type { PageData } from './$types';

  let { data }: { data: PageData } = $props();

  const page = $derived(data.page);
</script>

{#if page}
  {#if !data.topBanner && (page.headline || page.subheadline)}
    <div class="mb-6 pt-10 pageTitle">
      {#if page.headline}<h1>{page.headline}</h1>{/if}
      {#if page.subheadline}<h2>{page.subheadline}</h2>{/if}
    </div>
  {/if}
  <article>
    <ContentRows layout={page} translations={data.translations} />
  </article>
{:else}
  <div class="mb-6 pt-10 pageTitle">
    <h1>Pages</h1>
  </div>
  <ul class="space-y-3 mt-4">
    {#each data.pages as p}
      <li>
        <a
          href={'/' + ((p.slug ?? p._slug ?? '').replace(/^\//, '').trim() || '').split('/').filter(Boolean).map(encodeURIComponent).join('/')}
          class="block rounded-sm border border-zinc-200 bg-white px-4 py-3 shadow-sm transition hover:border-green-700/30 hover:shadow"
        >
          <span class="font-medium text-zinc-900">{p.linkName ?? p.name ?? p.slug ?? p._slug}</span>
          {#if p.headline}<span class="mt-1 block text-sm text-zinc-500">{p.headline}</span>{/if}
        </a>
      </li>
    {/each}
  </ul>
{/if}
