<script lang="ts">
  import { enhance } from '$app/forms';
  import type { PageData, ActionData } from './$types';

  let { data, form }: { data: PageData; form: ActionData } = $props();

  function fmt(iso: string) {
    const d = new Date(iso);
    return d.toLocaleString('it-IT', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }
</script>

<svelte:head><title>Richieste — Admin</title></svelte:head>

<header class="page-head">
  <p class="kicker">Form end-user</p>
  <h1>Richieste ricevute</h1>
  <p>Tutti i messaggi inviati dal modulo al fondo della landing page. Dal più recente al più vecchio.</p>
</header>

{#if form?.success}
  <div class="alert-row">Richiesta eliminata.</div>
{/if}
{#if form?.error}
  <div class="alert-row err">{form.error}</div>
{/if}

{#if data.submissions.length === 0}
  <div class="card">
    <h2>Nessuna richiesta</h2>
    <p>Nessun messaggio è ancora stato inviato dal form. Appena arriva una richiesta, compare qui.</p>
  </div>
{:else}
  <div class="sub-table">
    {#each data.submissions as s}
      <div class="sub-row">
        <header>
          <time>{fmt(s.createdAt)}</time>
          <span class="name">{s.name}</span>
          {#if s.dog}<span class="dog">Cane: {s.dog}</span>{/if}
          {#if s.phone}<a class="phone" href="tel:{s.phone}">{s.phone}</a>{/if}
        </header>
        <div class="msg">{s.message}</div>
        <div class="meta">
          {#if s.ip}<div>IP: {s.ip}</div>{/if}
          <div>ID: <code style="font-size:10px;">{s.id.slice(0, 8)}</code></div>
        </div>
        <form method="POST" action="?/delete" use:enhance>
          <input type="hidden" name="id" value={s.id} />
          <button type="submit" class="btn btn-danger btn-sm">
            <span class="material-symbols-outlined" aria-hidden="true">delete</span>
            Elimina
          </button>
        </form>
      </div>
    {/each}
  </div>
{/if}
