{{ define "title" }}Complete signup · Tangled{{ end }}

{{ define "content" }}
  <form
      class="mt-4 max-w-sm mx-auto flex flex-col gap-4 group"
      hx-post="/signup/complete"
      hx-swap="none"
      hx-disabled-elt="#complete-signup-button"
  >
      <div class="flex flex-col">
          <label for="code">Verification code</label>
          <input
              type="text"
              id="code"
              name="code"
              tabindex="1"
              required
              placeholder="tngl-sh-foo-bar"
              class="text-lg md:text-base"
          />
          <span class="text-sm text-gray-500 mt-1">
              Enter the code sent to your email.
          </span>
      </div>

      <div class="flex flex-col">
          <label for="username">Username</label>
          <input
              type="text"
              id="username"
              name="username"
              tabindex="2"
              required
              placeholder="jason"
              class="text-lg md:text-base"
          />
          <span class="text-sm text-gray-500 mt-1">
              Your complete handle will be of the form <code>user.tngl.sh</code>.
          </span>
      </div>

      <div class="flex flex-col">
          <label for="password">Password</label>
          <input
              type="password"
              id="password"
              name="password"
              tabindex="3"
              required
              class="text-lg md:text-base"
          />
          <span class="text-sm text-gray-500 mt-1">
              Choose a strong password for your account.
          </span>
      </div>

      <button
          class="btn-create w-full my-2 mt-6 text-base"
          type="submit"
          id="complete-signup-button"
          tabindex="4"
      >
        {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
        <span class="inline group-[.htmx-request]:hidden">Complete signup</span>
      </button>
  </form>
  <p id="signup-error" class="error w-full"></p>
  <p id="signup-msg" class="dark:text-white w-full"></p>
{{ end }}