;; Menu item form and page search components

(defcomp ~page-search-item (&key id title slug feature-image)
  (div :class "flex items-center gap-3 p-3 hover:bg-stone-50 cursor-pointer border-b last:border-b-0"
    :data-page-id id :data-page-title title :data-page-slug slug
    :data-page-image (or feature-image "")
    (if feature-image
      (img :src feature-image :alt title :class "w-10 h-10 rounded-full object-cover flex-shrink-0")
      (div :class "w-10 h-10 rounded-full bg-stone-200 flex-shrink-0"))
    (div :class "flex-1 min-w-0"
      (div :class "font-medium truncate" title)
      (div :class "text-xs text-stone-500 truncate" slug))))

(defcomp ~page-search-results (&key items sentinel)
  (div :class "border border-stone-200 rounded-md max-h-64 overflow-y-auto"
    items sentinel))

(defcomp ~page-search-sentinel (&key url query next-page)
  (div :sx-get url :sx-trigger "intersect once" :sx-swap "outerHTML"
    :sx-vals (str "{\"q\": \"" query "\", \"page\": " next-page "}")
    :class "p-3 text-center text-sm text-stone-400"
    (i :class "fa fa-spinner fa-spin") " Loading more..."))

(defcomp ~page-search-empty (&key query)
  (div :class "p-3 text-center text-stone-400 border border-stone-200 rounded-md"
    (str "No pages found matching \"" query "\"")))