{% 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">Create your account</h2>

  <form hx-post="/signup" hx-target="#signup-result" class="">
    <div class="form-control">
      <label class="floating-label">
        <span>Email</span>
        <input type="email" placeholder="Email" name="email" required class="input input-md w-full validator" />
        <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" name="password" class="input validator w-full" required placeholder="Password"
          minlength="8" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
          title="Must be more than 8 characters, including number, lowercase letter, uppercase letter" />
        <p class="validator-hint hidden">
          Must be more than 8 characters, including
          <br />At least one number
          <br />At least one lowercase letter
          <br />At least one uppercase letter
        </p>
      </label>
    </div>
    <div class="mt-4 text-error" id="signup-result"></div>
    <div class="form-control mt-6">
      <button id="submit-btn" class="btn btn-primary w-full">
        Create Account
      </button>
    </div>
    <input type="hidden" name="timezone" id="timezone" />
  </form>

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

  <div class="text-center text-sm">
    Already have an account?
    <a href="/signin" hx-boost="true" class="link link-primary">Sign in</a>
  </div>
</div>
<script>
  // Detect timezone and set hidden input
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  document.getElementById("timezone").value = timezone;
</script>
{% endblock %}