<script context="module" lang="ts">
    import type { components } from "../../apiScheme";

    type Event = components["schemas"]["Event"];
</script>

<script lang="ts">
    import { onMount } from "svelte";
    import Button from "../../Button.svelte";
    import Loading from "../../Loading.svelte";
    import { apiRequest } from "../../util";
    import EventCard from "./EventCard.svelte";

    let events: Event[] = [];
    let loading: boolean = false;
    let openedEvent: number | undefined;

    const loadEvents = async () => {
        loading = true;

        let response = await apiRequest('GET', '/event');

        if (response.status == 200) {
            events = await response.json();
        } else {
            console.error(`Request failed: got code ${response.status}, expected 200`);
        }
        
        loading = false;
    };

    onMount(async () => {
        await loadEvents();
    });
</script>


<div class="max-w-7xl mx-auto">
    {#if loading === true}
        <div class="grid place-items-center">
            <Loading />
        </div>
    {/if}
    {#each events as event, i}
        <div class="py-2">
            <EventCard {event} open={openedEvent === i} on:click={() => openedEvent = i} />
        </div>
    {/each}
</div>
