{{ define "title" }}Sign up · Tangled{{ end }}

{{ define "extrameta" }}
  <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{{ end }}

{{ define "content" }}
  <form
      class="mt-4 max-w-sm mx-auto group"
      hx-post="/signup"
      hx-swap="none"
      hx-disabled-elt="#signup-button"
  >
    <div class="flex flex-col mt-2">
        <label for="email">Email</label>
        <input
            type="email"
            id="email"
            name="email"
            tabindex="4"
            required
            placeholder="jason@bourne.co"
            value="{{ .EmailId }}"
            class="text-lg md:text-base"
        />
    </div>
    <span class="text-sm text-gray-500 mt-1">
      You will receive an email with an invite code. Enter your
      invite code, desired username, and password in the next
      page to complete your registration.
    </span>
    <div class="w-full mt-4 text-center">
      <div class="cf-turnstile" data-sitekey="{{ .CloudflareSiteKey }}" data-size="flexible"></div>
    </div>
    <button class="btn text-base w-full my-2 mt-6" type="submit" id="signup-button" tabindex="7" >
      {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
      <span class="inline group-[.htmx-request]:hidden">Join now</span>
    </button>
    <p class="text-sm text-gray-500">
      Already have an AT Protocol account? <a href="/login" class="underline">Login to Tangled</a>.
    </p>

    <p id="signup-msg" class="error w-full"></p>
    <p class="text-sm text-gray-500 pt-4">
      By signing up, you agree to our <a href="/terms" class="underline">Terms of Service</a> and <a href="/privacy" class="underline">Privacy Policy</a>.
    </p>
  </form>
{{ end }}