<script lang="ts">
  import BlogOverview from '$lib/components/BlogOverview.svelte';
  import { t, T } from '$lib/translations';
  import type { PageData } from './$types';

  let { data }: { data: PageData } = $props();
</script>

<svelte:head>
  <title>{data.seoTitle}</title>
  {#if data.seoDescription}
    <meta name="description" content={data.seoDescription} />
  {/if}
</svelte:head>

<div class="mb-6 pt-10 pageTitle">
  <h1>{t(data.translations, T.posts_title)}</h1>
  <h2>{t(data.translations, T.posts_subtitle)}</h2>
</div>
<div class="content mt-8">
  {#if data.cmsError}
    <div class="rounded-sm border border-amber-200 bg-amber-50 p-4 text-amber-800">
      <strong>{t(data.translations, T.posts_cms_error)}</strong> {data.cmsError}
    </div>
  {:else}
    <BlogOverview
      posts={data.posts}
      tags={data.tags}
      activeTag={data.activeTag}
      currentPage={data.currentPage}
      totalPages={data.totalPages}
      totalPosts={data.totalPosts}
      basePath="/posts"
      translations={data.translations}
      upcomingEvents={data.upcomingEvents}
      searchIndex={data.searchIndex}
    />
  {/if}
</div>
