<script lang="ts">
	import { enhance } from '$app/forms';

	let { event } = $props();
	let loading = $state(false);

	function handleEnhance() {
		loading = true;

		return async ({ update }) => {
			await update();
			loading = false;
		};
	}
</script>


<form method="POST" action="?/create" use:enhance={handleEnhance} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
  <h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
  <label class="flex flex-col text-gray-700">
    Name
    <input
      type="text"
      name="name"
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
      required
    />
  </label>
  <label class="flex flex-col text-gray-700">
    Date
    <input
      type="date"
      name="date"
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
      required
    />
  </label>
  <label class="flex flex-col text-gray-700">
    Description
    <textarea
      name="description"
      class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
      rows="3"
      required
    ></textarea>
  </label>
  <button
    type="submit"
    class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
  >
    Submit
  </button>
</form>

{#if Object.keys(event).length === 0}
  <div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
    {#if loading}
      <strong>Loading...</strong>
    {:else}
      <strong>No event created yet...</strong>
    {/if}
  </div>
{:else}
  <div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
    <ol>
      <li><strong>{event.name}</strong></li>
      <li>{event.date}</li>
      <li>{event.description}</li>
    </ol>
  </div>
{/if}