  <script lang="ts">
    import { onMount } from 'svelte';
    let anmeldungen = [];
  
    async function ladeAnmeldungen() {
      const res = await fetch('/api/admin/anmeldungen');
        anmeldungen = await res.json();
      }
      onMount(ladeAnmeldungen);
  </script> 
  
  <div class="p-6 max-w-4xl mx-auto">
      <h1 class="text-2xl font-bold mb-4">Alle Anmeldungen</h1>
      <table class="w-full border text-sm">
        <thead>
          <tr class="bg-gray-200">
            <th class="p-2 text-left">Name</th>
            <th class="p-2 text-left">E-Mail</th>
            <th class="p-2 text-left">Wunsch 1–3</th>
            <th class="p-2 text-left">Datum</th>
          </tr>
        </thead>
        <tbody>
          {#each anmeldungen as a}
            <tr class="border-t">
              <td class="p-2">{a.anrede} {a.vorname} {a.nachname}</td>
              <td class="p-2">{a.email}</td>
              <td class="p-2">{a.wunsch1.name}<br>{a.wunsch2.name}<br>{a.wunsch3.name}</td>
              <td class="p-2">{new Date(a.timestamp).toLocaleDateString()}</td>
            </tr>
          {/each}
        </tbody>
      </table>
  </div>
  
  <style>
    .input {
      @apply border rounded px-3 py-2 w-full;
    }
  </style>