{% block content %}
<div class="max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-center mb-8">Sign in to your account</h2>

  <form hx-post="/signin" hx-target="#signin-result" hx-indicator="#spinner" class="space-y-6">
    <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
        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
    </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 />
    </div>

    <div class="flex items-center justify-between">
      <label class="label cursor-pointer">
        <input type="checkbox" name="remember" class="checkbox checkbox-primary checkbox-sm mr-2" />
        <span class="label-text">Remember me</span>
      </label>
      <a href="/forgot-password" class="link link-primary text-sm">Forgot password?</a>
    </div>

    <div class="form-control mt-6">
      <button class="btn btn-primary w-full">
        Sign in
        <span id="spinner" class="loading loading-spinner text-primary htmx-indicator"></span>
      </button>
    </div>

    <div id="signin-result"></div>

    <div class="divider">OR</div>

    <div class="text-center text-sm">
      Don't have an account?
      <a href="/signup" class="link link-primary">Create one</a>
    </div>
  </form>
</div>
{% endblock %}