<script lang="ts">
  import { page } from "$app/stores";
  import type { PageData } from "./$types";

  import { defaultFilterUrl } from "$lib/shared/util";

  import { getSavedFilters } from "$lib/stores";

  export let data: PageData;

  const savedFilters = getSavedFilters();
</script>

<svelte:head>
  <title>Visitenbuch</title>
</svelte:head>

{#if $page.data.session?.user}
  <h1 class="heading">Hallo, {$page.data.session.user.name}</h1>
{:else}
  <p>Sie sind nicht angemeldet</p>
{/if}

<div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
>
  <div class="card bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title">Planung</h2>
      <p>Hier können sie neue Visitenbucheinträge erstellen.</p>
      <div class="card-actions justify-end">
        <a class="btn btn-primary" href={defaultFilterUrl($savedFilters, "plan")}>Planung</a>
      </div>
    </div>
  </div>

  <div class="card bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title">Visite</h2>
      <p>Hier können sie Visitenbucheinträge abarbeiten.</p>
      <p>Heute müssen
        <span data-testid="n-entries-todo">{data.nTodo}</span>
        Einträge erledigt werden.
      </p>
      <div class="card-actions justify-end">
        <a class="btn btn-primary" href="/visit">Visite</a>
      </div>
    </div>
  </div>

  <!-- <a href="/plan/%7B%22filter%22:%7B%22done%22:%22foo%22%7D%7D">Throw error</a> -->
</div>
