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

  let { data, form }: { data: PageData; form: ActionData } = $props();
</script>

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

<header class="page-head">
  <p class="kicker">Contatti</p>
  <h1>Contatti</h1>
  <p>
    Modifica i recapiti mostrati nel riquadro "Contatti rapidi" della sezione contatti della landing page.
  </p>
</header>

{#if form?.success}
  <div class="alert-row">Salvato — {form.count} modifiche applicate.</div>
{/if}
{#if form?.error}
  <div class="alert-row err">{form.error}</div>
{/if}

<div class="card">
  <h2>Recapiti rapidi</h2>
  <form method="POST" action="?/save" use:enhance style="margin-top:14px;">
    <div class="field">
      <label for="info_title">Titolo del riquadro</label>
      <input id="info_title" name="contact.info_title" type="text" value={data.values['contact.info_title']} />
    </div>

    <div class="section-divider"><h2>Telefono</h2></div>
    <div class="grid-2">
      <div class="field">
        <label for="phone_label">Etichetta</label>
        <input id="phone_label" name="contact.phone_label" type="text" value={data.values['contact.phone_label']} />
      </div>
      <div class="field">
        <label for="phone_value">Numero</label>
        <input id="phone_value" name="contact.phone_value" type="text" value={data.values['contact.phone_value']} />
      </div>
    </div>

    <div class="section-divider"><h2>Email</h2></div>
    <div class="grid-2">
      <div class="field">
        <label for="email_label">Etichetta</label>
        <input id="email_label" name="contact.email_label" type="text" value={data.values['contact.email_label']} />
      </div>
      <div class="field">
        <label for="email_value">Indirizzo email</label>
        <input id="email_value" name="contact.email_value" type="text" value={data.values['contact.email_value']} />
      </div>
    </div>

    <div class="section-divider"><h2>WhatsApp</h2></div>
    <div class="grid-2">
      <div class="field">
        <label for="wa_label">Etichetta</label>
        <input id="wa_label" name="contact.wa_label" type="text" value={data.values['contact.wa_label']} />
      </div>
      <div class="field">
        <label for="wa_value">Testo mostrato</label>
        <input id="wa_value" name="contact.wa_value" type="text" value={data.values['contact.wa_value']} />
      </div>
    </div>

    <div style="margin-top:18px;">
      <button type="submit" class="btn">
        <span class="material-symbols-outlined" aria-hidden="true">save</span>
        Salva contatti
      </button>
    </div>
  </form>
</div>
