{% extends "base.html" %}

{% block content %}
<div class="min-h-screen bg-base-200 flex items-center justify-center">
  <div class="card w-96 bg-base-100 shadow-xl">
    <div class="card-body">
      <h2 class="card-title text-2xl font-bold text-center mb-4">Sign Up</h2>

      <form hx-post="/signup" hx-target="#signup-result" class="space-y-4">

        <div class="form-control w-full">
          <label class="label">
            <span class="label-text">Email</span>
          </label>
          <input type="text" name="email" placeholder="Enter username" class="input input-bordered w-full" required />
        </div>

        <div class="form-control w-full">
          <label class="label">
            <span class="label-text">Password</span>
          </label>
          <input type="password" name="password" placeholder="Enter password" class="input input-bordered w-full"
            required />
        </div>

        <div class="form-control mt-6">
          <button class="btn btn-primary">
            Sign Up
            <span class="loading loading-spinner hidden"></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="/login" class="link link-primary">Login</a>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Add loading indicator when form is submitting -->
<script>
  document.body.addEventListener('htmx:beforeRequest', function (evt) {
    if (evt.target.tagName === 'FORM') {
      evt.target.querySelector('.loading-spinner').classList.remove('hidden');
      evt.target.querySelector('button').disabled = true;
    }
  });

  document.body.addEventListener('htmx:afterRequest', function (evt) {
    if (evt.target.tagName === 'FORM') {
      evt.target.querySelector('.loading-spinner').classList.add('hidden');
      evt.target.querySelector('button').disabled = false;
    }
  });
</script>
{% endblock %}