<script>
  import { enhance } from '$app/forms';
  export let form;
  $: form_so_far = form?.data ?? {};
  $: step = form?.step ?? 1;
</script>

{#if step == 1}
  <form method="POST" action="?/first" use:enhance>
    <label>
      <span>Name</span>
      <input name="name" value="Rainlife" />
    </label>
    <button>Next</button>
  </form>
{:else if step == 2}
  <form method="POST" action="?/second" use:enhance>
    {#each Object.entries(form_so_far) as [key, value]}
      <input type="hidden" name={key} {value} />
    {/each}
    <label>
      <span>Address</span>
      <input name="addres" value="123" />
    </label>
    <button>Next</button>
  </form>
{:else if step == 3}
  <form method="POST" action="?/third" use:enhance>
    {#each Object.entries(form_so_far) as [key, value]}
      <input type="hidden" name={key} {value} />
    {/each}
    <label>
      <span>Discord Handle</span>
      <input name="discord" value="@Rainlife" />
    </label>
    <button>Next</button>
  </form>
{/if}
