<script>
  import Event from '$lib/Events/Event.svelte';
  import Message from '$lib/Loading/Message.svelte';

  import root from '$lib/Utility/root';
</script>

{#await fetch(root(`/api/events`))}
  <Message message="Loading events ..." />
{:then eventsResponse}
  {#await eventsResponse.json()}
    <Message message="Parsing events ..." />
  {:then events}
    {#if events}
      {#each events as rawEvent, i}
        <Event event={rawEvent} avatar />

        {#if i < events.length - 1}
          <p></p>
        {/if}
      {/each}
    {/if}
  {:catch}
    <Message message="" loader="ripple" slot withReload>Error parsing events.</Message>
  {/await}
{/await}
