(defwindow floating-notifications []
    :monitor 0
    :exclusive false
    :focusable false
    :namespace "eww-notification-popup"
    :geometry (geometry :anchor "top right"
                        :width "512px"
                        :height "1px"
                        :x "5px")
    :stacking "overlay"

  (box :class "floating-notifications"
       :orientation "vertical"
       :space-evenly false
       :hexpand true
       :vexpand false

    (box :class "notifications"
         :space-evenly false
         :orientation "vertical"

      (for item in { json_popup_notifications["notifications"] }
        (floating-notification :summary "${item.summary.data}"
                               :body "${item.body.data}"
                               :image "${item.app-icon.data}"
                               :app-name "${item.app-name.data}"
                               :onhoverlost "sh scripts/notification-popup-remove.sh ${item.id.data}")
      )
    )

    (box :visible { arraylength(json_popup_notifications?.["notifications"]) > 0 }
         :orientation "horizontal"
         :valign "end"
         :class "bottom"
         :space-evenly true
         :vexpand false

      (box :class "left"
           :space-evenly false
        (box :space-evenly false
             :class "tip"
             :valign "center"
          (label :text "󱧡"
                 :class "icon")
          (label :halign "start"
                 :text "Hover to dismiss"
                 :yalign 0.5)
        )
      )

      (box :class "right"
           :space-evenly false
           :halign "end"
        (eventbox :class "button"
                  :onclick "sh ${EWW_CONFIG_DIR}/scripts/eww-window.sh close floating-notifications; ${EWW_CMD} update 'json_popup_notifications={\"notifications\": []}'"
          (box :class "clear-all"
               :space-evenly false

            (label :text "󰎟"
                   :class "icon")
            (label :text "Clear all")
          )
        )
      )
    )
  )
)

(defwidget floating-notification [ summary body image app-name ?onhoverlost ]
  (eventbox :onhoverlost "${onhoverlost}"
            :class "floating-notification-eventbox"
    (box :class "floating-notification"
         :space-evenly false
         :orientation "vertical"

      (box :orientation "horizontal"
           :class "top"
           :space-evenly false

        (image :class "app-icon"
               :icon "${ app-name =~ 'zen-alpha' ? 'zen-browser' : app-name }"
               :icon-size "menu")

        (label :text "${app-name}"
               :xalign 0)
      )

      (box :orientation "horizontal"
           :space-evenly false
           :class "content"
        (box :class "image"
             :style "background-image: image(url('${image}'));"
             :width 86
             :height 85
             :visible { image != "" ? true : false })

        (box :class "text-content"
             :orientation "vertical"
             :space-evenly false

          (label :class "summary"
                 :markup "${summary}"
                 :xalign 0)

          (label :class "body"
                 :markup "${body}"
                 :xalign 0
                 :wrap true
                 :show-truncated false)
        )
      )
    )
  )
)