(defwidget imageDPI [image size visible]
    (overlay
        :valign "center"
        :width "${size}"
        :height "${size}"
        :visible "${visible}"
        (box
            :width "${size}"
            :height "${size}")
        (transform
            :scale-x "50%"
            :scale-y "50%"
            :halign "center"
            :valign "center"
            :translate-x "${size}"
            :translate-y "${size}"
            (image
                :path "${image}"
                :image-width "${size * 2}"
                :image-height "${size * 2}"))))


(defwidget icon [widgetclass ?hover percentage image]
    (box
    :class "${widgetclass}"
    :space-evenly false
        (overlay
            :tooltip "${hover}"
            (circular-progress
                :width 18
                :value "${percentage}"
                :start-at 75
                :thickness 2
                :clockwise false)
            (transform
                :scale-x "50%"
                :scale-y "50%"
                :halign "center"
                :valign "center"
                :translate-x "16"
                :translate-y "16"
                (image
                    :path "${image}"
                    :image-width "32"
                    :image-height "32")))))

(defwidget workspace [activeOn occupied id icon monitor]
    (eventbox
        :onclick `/home/willifan/.config/scripts/workspaces.sh ${id}`
        :class {activeOn == monitor ? "activeWorkspace" : "smallBox"}
        :valign "center"
        :halign "center"
        :height 20
        :width 20
        (box
            :halign "center"
            :valign "center"
            :space-evenly false
            (smallSpacer)
            (label
                :class {occupied > 0 ? "" : "unoccupiedWorkspace"}
                :width 16
                :valign "center"
                :text {matches(id, "special:") ? substring(id, 8, 1) : id })
            (imageDPI
                :visible {occupied > 0 ? true : false}
                :valign "center"
                :image "/run/current-system/sw/share/icons/Papirus-Dark/128x128/apps/${icon}"
                :size "16")
            (smallSpacer))))

(defwidget smallSpacer []
    (box
        :valign "center"
        :width 2))

(defwidget space []
    (box
        :valign "center"
        :width 3))

(defwidget seperator []
    (box
        :valign "center"
        (label
            :valign "center"
            :text "|"
            )))