<script lang="ts">
  import { PageData } from './$types';
  import { page } from '$app/stores';
  import { getFlash } from 'sveltekit-flash-message/client';
  import { superForm } from 'sveltekit-superforms/client';
  import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte'

  export let data : PageData;

  const { form, errors, message, constraints, enhance } = superForm(data.form);
  const flash = getFlash(page);
</script>

<SuperDebug data={$form} />

<h3>Superforms testing ground</h3>

{#if $flash}
  <div class="status"
    class:error={$flash.type == 'error'}
    class:success={$flash.type == 'success'}
  >
    {$flash.message}
  </div>
{/if}

<form method="POST" use:enhance>
  <label>
    Name<br />
    <input
      name="name"
      aria-invalid={$errors.name ? 'true' : undefined}
      bind:value={$form.name}
    />
    {#if $errors.name}<span class="invalid">{$errors.name}</span>{/if}
  </label>

  <label>
    Email<br />
    <input
      name="email"
      type="email"
      aria-invalid={$errors.email ? 'true' : undefined}
      bind:value={$form.email}
    />
    {#if $errors.email}<span class="invalid">{$errors.email}</span>{/if}
  </label>

  <button>Submit</button>
</form>

<hr>
<p><a target="_blank" href="https://superforms.rocks/api">API Reference</a></p>

<style>
  .invalid {
    color: red;
  }

  .status {
    color: white;
    padding: 4px;
    padding-left: 8px;
    border-radius: 2px;
    font-weight: 500;
  }

  .status.success {
    background-color: seagreen;
  }

  .status.error {
    background-color: #ff2a02;
  }

  input {
    background-color: #ddd;
  }

  a {
    text-decoration: underline;
  }

  hr {
    margin-top: 4rem;
  }

  form {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
</style>