<script lang="ts">
  const { data }: { data: null | { code: string } } = $props();
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>
<h5 class="my-5 mx-auto">Password recovery</h5>
{#if data?.code}
  <form method="POST" action="/recover/reset">
    <input type="hidden" name="code" value={data.code} />
    <div class="mt-2">
      <label class="floating-label" for="pass"
        ><span>New password</span>
        <input class="input" type="password" name="pass" placeholder="New password" />
      </label>
    </div>
    <div class="mt-2">
      <label class="floating-label" for="pass2"
        ><span>Confirm</span>
        <input class="input" type="password" name="pass2" placeholder="Confirm" />
      </label>
    </div>
    <div class="mt-4 text-center">
      <button class="btn btn-primary">Ok</button>
    </div>
  </form>
{:else}
  <form method="POST" action="/recover/init">
    <label class="label" for="login">Login or email</label>
    <input class="input" type="text" name="login" placeholder="Login" />
    <div class="mt-4 text-center">
      <button class="btn btn-primary">Ok</button>
    </div>
  </form>
{/if}