(defcomp
  ()
  (div
    (~tw :tokens "space-y-3")
    (div
      (~tw :tokens "flex gap-2 items-center")
      (input
        :id "ref-evt-br-input"
        :type "text"
        :placeholder "Type something first..."
        (~tw :tokens "flex-1 px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500"))
      (button
        :sx-get "/sx/(geography.(hypermedia.(reference.(api.time))))"
        :sx-target "#ref-evt-br-result"
        :sx-swap "innerHTML"
        :sx-on:sx:beforeRequest "if (!document.getElementById('ref-evt-br-input').value) { event.preventDefault(); document.getElementById('ref-evt-br-result').textContent = 'Cancelled — input is empty!'; }"
        (~tw :tokens "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm")
        "Load"))
    (div
      :id "ref-evt-br-result"
      (~tw :tokens "p-3 rounded bg-stone-100 text-stone-400 text-sm")
      "Request is cancelled via preventDefault() if the input is empty.")))