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

<div class="min-h-screen container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
  <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="label">
        <span class="label-text">Email</span>
      </label>
      <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
    </div>
    <div class="form-control">
      <label class="label">
        <span class="label-text">Password</span>
      </label>
      <input type="password" name="password" placeholder="Enter your password" class="input input-bordered w-full"
        required 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 checkbox-primary" />
        <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 %}