;; Blog filter components

(defcomp ~blog-action-button (&key href hx-select btn-class title icon-class label)
  (a :href href :sx-get href :sx-target "#main-panel"
    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
    :class btn-class :title title (i :class icon-class) label))

(defcomp ~blog-drafts-button (&key href hx-select btn-class title label draft-count)
  (a :href href :sx-get href :sx-target "#main-panel"
    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
    :class btn-class :title title (i :class "fa fa-file-text-o mr-1") " Drafts "
    (span :class "inline-block bg-stone-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1" draft-count)))

(defcomp ~blog-drafts-button-amber (&key href hx-select btn-class title label draft-count)
  (a :href href :sx-get href :sx-target "#main-panel"
    :sx-select hx-select :sx-swap "outerHTML" :sx-push-url "true"
    :class btn-class :title title (i :class "fa fa-file-text-o mr-1") " Drafts "
    (span :class "inline-block bg-amber-500 text-white px-1.5 py-0.5 text-xs font-medium rounded ml-1" draft-count)))

(defcomp ~blog-action-buttons-wrapper (&key inner)
  (div :class "flex flex-wrap gap-2 px-4 py-3" inner))

(defcomp ~blog-filter-any-topic (&key cls hx-select)
  (li (a :class (str "px-3 py-1 rounded border " cls)
    :sx-get "?page=1" :sx-target "#main-panel" :sx-select hx-select
    :sx-swap "outerHTML" :sx-push-url "true" "Any Topic")))

(defcomp ~blog-filter-group-icon-image (&key src name)
  (img :src src :alt name :class "h-6 w-6 rounded-full object-cover border border-stone-300 flex-shrink-0"))

(defcomp ~blog-filter-group-icon-color (&key style initial)
  (div :class "h-6 w-6 rounded-full text-[10px] font-semibold flex items-center justify-center border border-stone-300 flex-shrink-0" :style style initial))

(defcomp ~blog-filter-group-li (&key cls hx-get hx-select icon name count)
  (li (a :class (str "flex items-center gap-2 px-3 py-1 rounded border " cls)
    :sx-get hx-get :sx-target "#main-panel" :sx-select hx-select
    :sx-swap "outerHTML" :sx-push-url "true"
    icon
    (span :class "inline-block rounded-full bg-stone-100 text-stone-600 px-2 py-1 text-sm font-medium border border-stone-200" name)
    (span :class "flex-1")
    (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200" count))))

(defcomp ~blog-filter-nav (&key items)
  (nav :class "max-w-3xl mx-auto px-4 pb-4 flex flex-wrap gap-2 text-sm"
    (ul :class "divide-y flex flex-col gap-3" items)))

(defcomp ~blog-filter-any-author (&key cls hx-select)
  (li (a :class (str "px-3 py-1 rounded " cls)
    :sx-get "?page=1" :sx-target "#main-panel" :sx-select hx-select
    :sx-swap "outerHTML" :sx-push-url "true" "Any author")))

(defcomp ~blog-filter-author-icon (&key src name)
  (img :src src :alt name :class "h-5 w-5 rounded-full object-cover"))

(defcomp ~blog-filter-author-li (&key cls hx-get hx-select icon name count)
  (li (a :class (str "flex items-center gap-2 px-3 py-1 rounded " cls)
    :sx-get hx-get :sx-target "#main-panel" :sx-select hx-select
    :sx-swap "outerHTML" :sx-push-url "true"
    icon
    (span :class "text-stone-700" name)
    (span :class "flex-1")
    (span :class "inline-block bg-stone-100 text-stone-600 px-2 py-1 text-xs font-medium border border-stone-200" count))))

(defcomp ~blog-filter-summary (&key text)
  (span :class "text-sm text-stone-600" text))