<!--
  -   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 {Button, Navbar, NavBrand, NavHamburger, NavLi, NavUl, Spinner} from "flowbite-svelte";
    import {PlusOutline} from "flowbite-svelte-icons";
    import EventCard from "./home/EventCard.svelte";
    import CreateEventModal from "./home/CreateEventModal.svelte";
    import {eventRepo} from "@repo/event.ts";

    let events = $state($eventRepo.listEvents());
    let showAdd = $state(false);
    let millis = Date.now();
</script>

<Navbar   class="shadow-lg border-b">
    {#snippet children({ hidden, toggle })}
    <NavBrand href="/">
          <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
            Mod-Tool
          </span>
      </NavBrand>
      <NavHamburger onclick={toggle}/>
      <NavUl {hidden}>
          <NavLi href="#/edit">Edit Pages</NavLi>
          <NavLi href="#/perms">Permissions</NavLi>
      </NavUl>
  {/snippet}
</Navbar>

<CreateEventModal bind:open={showAdd} on:create={() => events = $eventRepo.listEvents()}/>

{#await events}
    <div class="h-screen w-screen grid place-items-center">
        <Spinner size={16}/>
    </div>
{:then data}
    <Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => showAdd = true}>
        <PlusOutline/>
    </Button>

    <h1 class="text-3xl mt-4 ml-4">Upcoming</h1>
    <div class="grid gap-4 p-4 border-b" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
        {#each data.filter((e) => e.start > millis) as event}
            <EventCard {event}/>
        {/each}
    </div>
    <h1 class="text-3xl mt-4 ml-4">Past</h1>
    <div class="grid gap-4 p-4" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
        {#each data.filter((e) => e.start < millis).reverse() as event}
            <EventCard {event}/>
        {/each}
    </div>
{:catch error}
    <p>
        {error.message}
    </p>
{/await}

<svelte:head>
    <title>SteamWar.de Multitool - Home</title>
</svelte:head>
