<div class="container mx-auto px-4 sm:max-w-md flex-1 flex items-center justify-center">
  <div class="w-full nb-card p-5">
    <div class="flex items-center justify-between mb-3">
      <div class="brand-mark text-3xl font-extrabold tracking-tight">MINNE</div>
      <span class="nb-badge">Sign In</span>
    </div>
    <div class="u-hairline mb-3"></div>

    <form hx-post="/signin" hx-target="#login-result" class="flex flex-col gap-2">
      <label class="w-full">
        <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Email</div>
        <input name="email" type="email" placeholder="Email" class="nb-input w-full validator" required />
        <div class="validator-hint hidden text-xs opacity-70 mt-1">Enter valid email address</div>
      </label>

      <label class="w-full">
        <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Password</div>
        <input name="password" type="password" class="nb-input w-full validator" required placeholder="Password"
          minlength="8" />
      </label>

      <div class="mt-1 text-error" id="login-result"></div>

      <div class="form-control mt-1">
        <label class="label cursor-pointer justify-start gap-3">
          <input type="checkbox" name="remember_me" class="nb-checkbox" />
          <span class="label-text">Remember me</span>
        </label>
      </div>


      <div class="form-control mt-1">
        <button id="submit-btn" class="nb-btn nb-cta w-full">Login</button>
      </div>
    </form>

    <div class="u-hairline my-3"></div>
    <div class="text-center text-sm">
      Don’t have an account?
      <a href="/signup" hx-boost="true" class="nb-link">Sign up</a>
    </div>
  </div>
</div>
