;; Blog index components

(defcomp ~blog-end-of-results ()
  (div :class "col-span-full mt-4 text-center text-xs text-stone-400" "End of results"))

(defcomp ~blog-sentinel-mobile (&key id next-url hyperscript)
  (div :id id :class "block md:hidden h-[60vh] opacity-0 pointer-events-none js-mobile-sentinel"
    :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinelmobile:retry"
    :sx-swap "outerHTML" :_ hyperscript
    :role "status" :aria-live "polite" :aria-hidden "true"
    (div :class "js-loading hidden flex justify-center py-8"
      (div :class "animate-spin h-8 w-8 border-4 border-stone-300 border-t-stone-600 rounded-full"))
    (div :class "js-neterr hidden text-center py-8 text-stone-400"
      (i :class "fa fa-exclamation-triangle text-2xl")
      (p :class "mt-2" "Loading failed \u2014 retrying\u2026"))))

(defcomp ~blog-sentinel-desktop (&key id next-url hyperscript)
  (div :id id :class "hidden md:block h-4 opacity-0 pointer-events-none"
    :sx-get next-url :sx-trigger "intersect once delay:250ms, sentinel:retry"
    :sx-swap "outerHTML" :_ hyperscript
    :role "status" :aria-live "polite" :aria-hidden "true"
    (div :class "js-loading hidden flex justify-center py-2"
      (div :class "animate-spin h-6 w-6 border-2 border-stone-300 border-t-stone-600 rounded-full"))
    (div :class "js-neterr hidden text-center py-2 text-stone-400 text-sm" "Retry\u2026")))

(defcomp ~blog-page-sentinel (&key id next-url)
  (div :id id :class "h-4 opacity-0 pointer-events-none"
    :sx-get next-url :sx-trigger "intersect once delay:250ms" :sx-swap "outerHTML"))

(defcomp ~blog-no-pages ()
  (div :class "col-span-full mt-8 text-center text-stone-500" "No pages found."))

(defcomp ~blog-list-svg ()
  (svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none" :viewBox "0 0 24 24"
    :stroke "currentColor" :stroke-width "2"
    (path :stroke-linecap "round" :stroke-linejoin "round" :d "M4 6h16M4 12h16M4 18h16")))

(defcomp ~blog-tile-svg ()
  (svg :xmlns "http://www.w3.org/2000/svg" :class "h-5 w-5" :fill "none" :viewBox "0 0 24 24"
    :stroke "currentColor" :stroke-width "2"
    (path :stroke-linecap "round" :stroke-linejoin "round"
      :d "M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM14 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zM14 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z")))

(defcomp ~blog-view-toggle (&key list-href tile-href hx-select list-cls tile-cls list-svg tile-svg)
  (div :class "hidden md:flex justify-end px-3 pt-3 gap-1"
    (a :href list-href :sx-get list-href :sx-target "#main-panel" :sx-select hx-select
      :sx-swap "outerHTML" :sx-push-url "true" :class (str "p-1.5 rounded " list-cls) :title "List view"
      :_ "on click js localStorage.removeItem('blog_view') end" list-svg)
    (a :href tile-href :sx-get tile-href :sx-target "#main-panel" :sx-select hx-select
      :sx-swap "outerHTML" :sx-push-url "true" :class (str "p-1.5 rounded " tile-cls) :title "Tile view"
      :_ "on click js localStorage.setItem('blog_view','tile') end" tile-svg)))

(defcomp ~blog-content-type-tabs (&key posts-href pages-href hx-select posts-cls pages-cls)
  (div :class "flex justify-center gap-1 px-3 pt-3"
    (a :href posts-href :sx-get posts-href :sx-target "#main-panel"
      :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
      :class (str "px-4 py-1.5 rounded-t text-sm font-medium transition-colors " posts-cls) "Posts")
    (a :href pages-href :sx-get pages-href :sx-target "#main-panel"
      :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
      :class (str "px-4 py-1.5 rounded-t text-sm font-medium transition-colors " pages-cls) "Pages")))

(defcomp ~blog-main-panel-pages (&key tabs cards)
  (<> tabs
      (div :class "max-w-full px-3 py-3 space-y-3" cards)
      (div :class "pb-8")))

(defcomp ~blog-main-panel-posts (&key tabs toggle grid-cls cards)
  (<> tabs
      toggle
      (div :class grid-cls cards)
      (div :class "pb-8")))

(defcomp ~blog-aside (&key search action-buttons tag-groups-filter authors-filter)
  (<> search
      action-buttons
    (div :id "category-summary-desktop" :hxx-swap-oob "outerHTML"
      tag-groups-filter
      authors-filter)
    (div :id "filter-summary-desktop" :hxx-swap-oob "outerHTML")))