;; Auth components (choose username — federation-specific)
;; Login and check-email components are shared: see shared/sx/templates/auth.sx

(defcomp ~auth/choose-username (&key (domain :as string) error (csrf :as string) (username :as string) (check-url :as string))
  (div :class "py-8 max-w-md mx-auto"
    (h1 :class "text-2xl font-bold mb-2" "Choose your username")
    (p :class "text-stone-600 mb-6" "This will be your identity on the fediverse: "
      (strong "@username@" domain))
    error
    (form :method "post" :class "space-y-4"
      (input :type "hidden" :name "csrf_token" :value csrf)
      (div
        (label :for "username" :class "block text-sm font-medium mb-1" "Username")
        (div :class "flex items-center"
          (span :class "text-stone-400 mr-1" "@")
          (input :type "text" :name "username" :id "username" :value username
            :pattern "[a-z][a-z0-9_]{2,31}" :minlength "3" :maxlength "32"
            :required true :autocomplete "off"
            :class "flex-1 border border-stone-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-stone-500"
            :sx-get check-url :sx-trigger "keyup changed delay:300ms" :sx-target "#username-status"
            :sx-include "[name='username']"))
        (div :id "username-status" :class "text-sm mt-1")
        (p :class "text-xs text-stone-400 mt-1" "3-32 characters. Lowercase letters, numbers, underscores. Must start with a letter."))
      (button :type "submit"
        :class "w-full bg-stone-800 text-white py-2 px-4 rounded hover:bg-stone-700 transition"
        "Claim username"))))