(defcomp ~shared:fragments/link-card (&key (link :as string) (title :as string) (image :as string?) (icon :as string?)
                          (subtitle :as string?) (detail :as string?) (data-app :as string?))
  (a :href link
     :class "block rounded border border-stone-200 bg-white hover:bg-stone-50 transition-colors no-underline"
     :data-fragment "link-card"
     :data-app data-app
     :sx-disable true
    (div :class "flex flex-row items-start gap-3 p-3"
      (if image
        (img :src image :alt "" :class "flex-shrink-0 w-16 h-16 rounded object-cover")
        (div :class "flex-shrink-0 w-16 h-16 rounded bg-stone-100 flex items-center justify-center text-stone-400"
          (i :class icon)))
      (div :class "flex-1 min-w-0"
        (div :class "font-medium text-stone-900 text-sm clamp-2" title)
        (when subtitle
          (div :class "text-xs text-stone-500 mt-0.5" subtitle))
        (when detail
          (div :class "text-xs text-stone-400 mt-1" detail))))))

(defcomp ~shared:fragments/cart-mini (&key (cart-count :as number) (blog-url :as string) (cart-url :as string) (oob :as string?))
  (div :id "cart-mini"
       :sx-swap-oob oob
    (if (= cart-count 0)
      (div :class "h-12 w-12 rounded-full overflow-hidden border border-stone-300 flex-shrink-0"
        (a :href blog-url
           :class "h-full w-full font-bold text-5xl flex-shrink-0 flex flex-row items-center gap-1"
          (img :src (str blog-url "static/img/logo.jpg")
               :class "h-full w-full rounded-full object-cover border border-stone-300 flex-shrink-0")))
      (a :href cart-url
         :sx-get cart-url
         :sx-target "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
         :class "relative inline-flex items-center justify-center text-stone-700 hover:text-emerald-700"
        (i :class "fa fa-shopping-cart text-5xl" :aria-hidden "true")
        (span :class "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-full bg-emerald-600 text-white text-sm w-5 h-5"
          cart-count)))))

(defcomp ~shared:fragments/auth-menu (&key (user-email :as string?) (account-url :as string))
  (<>
    (span :id "auth-menu-desktop" :class "hidden md:inline-flex"
      (if user-email
        (a :href account-url
           :sx-get account-url
           :sx-target "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
           :class "justify-center cursor-pointer flex flex-row items-center p-3 gap-2 rounded bg-stone-200 text-black"
           :data-close-details true
          (i :class "fa-solid fa-user")
          (span user-email))
        (a :href account-url
           :sx-get account-url
           :sx-target "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
           :class "justify-center cursor-pointer flex flex-row items-center p-3 gap-2 rounded bg-stone-200 text-black"
           :data-close-details true
          (i :class "fa-solid fa-key")
          (span "sign in or register"))))
    (span :id "auth-menu-mobile" :class "block md:hidden text-md font-bold"
      (if user-email
        (a :href account-url
           :sx-get account-url
           :sx-target "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
           :data-close-details true
          (i :class "fa-solid fa-user")
          (span user-email))
        (a :href account-url
           :sx-get account-url
           :sx-target "#main-panel" :sx-swap "outerHTML" :sx-push-url "true"
          (i :class "fa-solid fa-key")
          (span "sign in or register"))))))

(defcomp ~shared:fragments/account-nav-item (&key (href :as string) (label :as string))
  (div :class "relative nav-group"
    (a :href href
       :class "justify-center cursor-pointer flex flex-row items-center gap-2 rounded bg-stone-200 text-black p-3"
       :sx-disable true
      label)))