<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import {Card} from "flowbite-svelte";
    import {link} from "svelte-spa-router";
    import type {ShortEvent} from "@type/event.ts";

  interface Props {
    event: ShortEvent;
  }

  let { event }: Props = $props();

    let sameDate = $derived(new Intl.DateTimeFormat().format(event.start) === new Intl.DateTimeFormat().format(event.end));
</script>

<a href="/event/{event.id}" use:link>
    <Card class="hover:scale-105 transition">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{event.name}</h5>
        {#if !sameDate}
            <p>Startet: {new Intl.DateTimeFormat().format(event.start)}</p>
            <p>Endet: {new Intl.DateTimeFormat().format(event.end)}</p>
        {:else}
            <p>Am: {new Intl.DateTimeFormat().format(event.start)}</p>
            <p>&nbsp;</p>
        {/if}
    </Card>
</a>
