{% extends "head_base.html" %}
{% block body %}
<style>
  form.htmx-request {
    opacity: 0.5;
  }
</style>

<div class="min-h-[100dvh] container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
  <h1
    class="text-5xl sm:text-6xl py-4 pt-10 font-bold bg-linear-to-r from-primary to-secondary text-center text-transparent bg-clip-text">
    Minne
  </h1>
  <h2 class="text-2xl font-bold text-center mb-8">Login to your account</h2>

  <form hx-post="/signin" hx-target="#login-result">

    <div class="form-control">
      <label class="floating-label">
        <span>Email</span>
        <input type="email" placeholder="Email" class="input input-md w-full validator" required />
        <div class="validator-hint hidden">Enter valid email address</div>
      </label>
    </div>

    <div class="form-control mt-4">
      <label class="floating-label">
        <span>Password</span>
        <input type="password" class="input validator w-full" required placeholder="Password" minlength="8" />
    </div>

    <div class="form-control mt-4">
      <label class="label cursor-pointer justify-start gap-4">
        <input type="checkbox" name="remember_me" class="checkbox " />
        <span class="label-text">Remember me</span>
      </label>
    </div>
    <div class="mt-4" id="login-result"></div>
    <div class="form-control mt-6">
      <button id="submit-btn" class="btn btn-primary w-full">
        Login
      </button>
    </div>
  </form>
  <div class="divider">OR</div>
  <div class="text-center text-sm">
    Don't have an account?
    <a href="/signup" hx-boost="true" class="link link-primary">Sign up</a>
  </div>
</div>
{% endblock %}