<script lang="ts">
    export let data;
</script>

<h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
  {#each data.events as event}
    <a
      href={`/private/events/event?id=${event.id}`}
      class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group"
    >
      <div class="flex flex-col gap-1">
        <span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
        <span class="text-gray-500 text-sm">{event.date}</span>
      </div>
    </a>
  {/each}
</div>

<a
  href="/private/creator"
  class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-none border border-gray-300"
>
  New Event
</a>