<script>
import Event from "$lib/Events/Event.svelte";
import Spacer from "$lib/Layout/Spacer.svelte";
import Message from "$lib/Loading/Message.svelte";

import root from "$lib/Utility/root";
import locale from "$stores/locale";
</script>

{#await fetch(root(`/api/events`))}
  <Message message={$locale().events?.loadingEvents} />
{:then eventsResponse}
  {#await eventsResponse.json()}
    <Message message={$locale().events?.parsingEvents} />
  {:then events}
    {#if events}
      {#each events as rawEvent, i}
        <Event event={rawEvent} avatar />

        {#if i < events.length - 1}
          <Spacer />
        {/if}
      {/each}
    {/if}
  {:catch}
    <Message message="" loader="ripple" slot withReload>{$locale().events?.errorParsingEvents}</Message>
  {/await}
{/await}
