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

{{ define "content" }}
  <form
      class="mt-4 w-full max-w-lg 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>
          <div class="flex items-stretch rounded border border-gray-200 dark:border-gray-600 overflow-hidden focus-within:ring-1 focus-within:ring-blue-500 dark:bg-gray-700 mt-1">
              <input
                  type="text"
                  id="username"
                  name="username"
                  tabindex="2"
                  required
                  placeholder="jason"
                  autocapitalize="none"
                  autocorrect="off"
                  class="flex-1 px-2 py-1.5 bg-transparent dark:text-white border-0 focus:outline-none focus:ring-0 min-w-0 text-lg md:text-base"
              />
              <span class="px-2 py-1.5 bg-gray-100 dark:bg-gray-600 text-gray-500 dark:text-gray-300 select-none whitespace-nowrap border-l border-gray-200 dark:border-gray-600 content-center">{{ const.PdsUserDomain }}</span>
          </div>
          <span class="text-sm text-gray-500 mt-1">
              Your complete handle will be <code id="handle-preview">user{{ const.PdsUserDomain }}</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>

  <script>
    (function () {
      const input = document.getElementById("username");
      const preview = document.getElementById("handle-preview");
      const domain = "{{ const.PdsUserDomain }}";
      input.addEventListener("input", function () {
        preview.textContent = (input.value || "user") + domain;
      });
    })();
  </script>
{{ end }}