<script lang="ts">
  import { page } from '$app/state';
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>
<h1 class="my-5 mx-auto">Welcome to the Nest</h1>
<div class="mx-auto mb-5">
  The best place to host your <a href="https://pijul.org">Pijul</a> repositories and collaborate with
  others.
</div>
<div class="card">
  <div class="card-body mx-auto w-96">
    <form method="POST" action="/login">
      <input class="input" type="text" name="login" placeholder="Login" />
      <div class="mt-4">
        <input class="input" type="password" name="pass" placeholder="Password" />
      </div>
      <div class="mt-4">
        <a class="link" href="/recover">Click here to reset your password</a>
      </div>
      <div class="mt-4 text-center">
        <button class="btn btn-primary">Ok</button>
      </div>
    </form>
  </div>
</div>

<div class="card mx-auto card-border w-96">
  <div class="mx-auto mt-4">Create an account:</div>
  <div class="card-body">
    <form method="POST" action="/register">
      <div class="mt-4">
        <input class="input" type="text" name="login" placeholder="Login" autocomplete="off" />
      </div>
      <div class="mt-4">
        <input
          class="input"
          type="email"
          name="email"
          placeholder="Email address"
          autocomplete="off" />
      </div>
      <div class="mt-4">
        <input
          class="input"
          type="password"
          name="pass"
          placeholder="Password"
          autocomplete="new-password" />
      </div>
      <div class="mt-4">
        <input
          class="input"
          type="password"
          name="confpass"
          placeholder="Confirm password"
          autocomplete="new-password" />
      </div>
      {#if page.url.searchParams.get('error') == 'alreadyExists'}
        <div class="mt-4 text-danger">This login is already taken.</div>
      {/if}
      <div class="mt-4 text-center">
        <button class="btn btn-primary">Register</button>
      </div>
    </form>
  </div>
</div>