(defcomp
  (&key percent job-id)
  (div
    (~tw :tokens "space-y-3")
    (div
      (~tw :tokens "w-full bg-stone-200 rounded-full h-4")
      (div
        (~tw :tokens "bg-violet-600 h-4 rounded-full transition-all")
        :style (str "width: " percent "%")))
    (p (~tw :tokens "text-sm text-stone-500 text-center") (str percent "% complete"))
    (when
      (< percent 100)
      (div
        :sx-get (str
          "/sx/(geography.(hypermedia.(example.(api.progress-status))))?job="
          job-id)
        :sx-trigger "load delay:500ms"
        :sx-target "#progress-target"
        :sx-swap "innerHTML"))
    (when
      (= percent 100)
      (p
        (~tw :tokens "text-sm text-emerald-600 font-medium text-center")
        "Job complete!"))))
