{% block content %}
<div class="max-h-full grid place-items-center place-content-center">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-center mb-8">Create your account</h2>

    <form hx-post="/signup" hx-target="#signup-result" hx-indicator="#spinner" class="" psac-y-e6>
      <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="Create a password" class="input input-bordered w-full"
          required minlength="8" />
        <input type="password" name="confirm_password" placeholder="Confirm your password"
          class="input mt-2 input-bordered w-full" required minlength="8" />
      </div>

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

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

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

      <div class="text-center text-sm">
        Already have an account?
        <a href="/signin" class="link link-primary">Sign in</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}