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

  import { formatBool, formatDate } from "$lib/shared/util";

  import CategoryField from "$lib/components/table/CategoryField.svelte";
  import UserField from "$lib/components/table/UserField.svelte";
  import Header from "$lib/components/ui/Header.svelte";

  export let data: PageData;
  $: entryId = $page.params.id;
</script>

<svelte:head>
  <title>Eintrag #{entryId} - Versionen</title>
</svelte:head>

<Header backHref="/entry/{entryId}" title="Eintrag #{entryId} - Versionen" />

{#each data.versions as version, i}
  <div class="card2">
    <div class="row c-light text-sm">
      #{i + 1}&nbsp;
      <UserField user={version.author} />, {formatDate(version.created_at, true)}
    </div>
    {#if version.category}
      <div class="row">
        <div>Kategeorie</div>
        <div><CategoryField category={version.category} /></div>
      </div>
    {/if}
    {#if version.text.length > 0}
      <div class="row">
        <div>Text</div>
        <div class="whitespace-pre-wrap">
          {#each version.text as change}
            <span class:added={change.added} class:removed={change.removed}>
              {change.value}
            </span>
          {/each}
        </div>
      </div>
    {/if}
    {#if version.date !== undefined}
      <div class="row">
        <div>Datum</div>
        <div>{formatDate(version.date)}</div>
      </div>
    {/if}
    {#if version.priority !== undefined}
      <div class="row">
        <div>Priorität</div>
        <div>{formatBool(version.priority)}</div>
      </div>
    {/if}
  </div>
{/each}

<style lang="postcss">
  .row > div:first-child {
    min-width: 6.5rem;
  }

  .added {
    @apply bg-success/20;
  }

  .removed {
    @apply bg-error/20;
  }
</style>
