(defwidget system_widget []
  (eventbox
    :onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
    :onmiddleclick "playerctl play-pause"
    :onrightclick "playerctl next || playerctl position `bc <<< \"100 * $(playerctl metadata mpris:length) / 1000000 / 100\"`"
    :onclick "scripts/toggle-sideright.sh &"
    (box
      :class "bar-group-margin bar-sides"
      (box
        :class "bar-group bar-group-standalone bar-group-pad"
        :orientation "h" :space-evenly false :spacing 15
        (box
          :space-evenly false :spacing 5
          (label :xalign 0 :class "txt-norm txt"
            :text {formattime(EWW_TIME, '%I:%M')}
          )
          (label :xalign 0 :class "txt-norm txt"
            :text "•"
          )
          (label :xalign 0 :class "txt-smallie txt"
            :text {formattime(EWW_TIME, '%A, %d/%m')}
          )
        )
        (box
          :hexpand true :valign "center"
          :space-evenly false :spacing 2
          :class "bar-batt${battery.percentage <= BATTERY_LOW ? '-low' : ''}"
          :tooltip {battery.status == ' left' || battery.status == ' to full' ? "${battery.percentage}%" : battery.status}
          (label :xalign 0
            :valign "center"
            :class "bar-batt-percentage"
            :text {battery.percentage}
          )
          (progress
            :hexpand true :valign "center"
            :value {battery.percentage}
            :class "bar-prog-batt${battery.percentage <= BATTERY_LOW ? '-low' : ''}"
          )
          (box
            :valign "center"
            :class "bar-batt-chargestate${battery.quickicon == '' ? '' : (battery.percentage <= BATTERY_LOW ? '-charging-low' : '-charging')}"
          )
        )
        (box ; Icons
          :space-evenly false :spacing 10
          :orientation "h"
          :class "bar-pad-horiz-moreright"
          (box
            :valign "center"
            :orientation "v"
            :space-evenly false :spacing -4
            (label :class "icon-material bar-system-icon txt-norm txt"
              :text "keyboard"
            )
            (label :class "txt-tiny txt" :text {lang_ibus.name_abbr})
          )
          ; (label
            ;   :valign "center"
            ;   :class "icon-material bar-system-icon txt-norm"
            ;   :text {WIFI_ICONS[net.level]}
          ; )
          ; (label
            ;   :valign "center"
            ;   :class "icon-material bar-system-icon txt-norm"
            ;   :text {bluetooth.icon}
          ; )
        )
      )
    )
  )
)

(defwidget system_bottom_widget []
  (eventbox
    :onscroll "echo $(echo {} | sed -e 's/down/-/g' -e 's/up/+/g' | xargs -I% wpctl set-volume @DEFAULT_AUDIO_SINK@ 0.03%) && scripts/volume osd &"
    :onmiddleclick "playerctl play-pause"
    :onrightclick "playerctl next || playerctl position `bc <<< \"100 * $(playerctl metadata mpris:length) / 1000000 / 100\"`"
    :onclick "scripts/toggle-sideright.sh &"
    (box
      :class "bar-group-margin bar-bottom-sides"
      (box
        :class "bar-group bar-group-round bar-group-pad-less"
        :orientation "h" :space-evenly false :spacing 10
        (box ; Icons
          :space-evenly false :spacing 10
          :orientation "h"
          :class "bar-pad-horiz-moreright"
          (systray :pack-direction "rtl" :icon-size 20)
          (box
            :valign "center"
            :orientation "v"
            :space-evenly false :spacing -4
            (label :class "icon-material bar-system-icon txt-norm txt"
              :text "keyboard"
            )
            (label :class "txt-tiny txt" :text {lang_ibus.name_abbr})
          )
          (label
            :valign "center"
            :class "icon-material bar-system-icon txt-norm txt"
            :text {WIFI_ICONS[net.level]}
          )
          (label
            :valign "center"
            :class "icon-material bar-system-icon txt-norm txt"
            :text {bluetooth.icon}
          )
        )
        (box
          :valign "center"
          :orientation "v"
          :space-evenly false
          (label :xalign 0 :class "txt-norm txt"
            :text {formattime(EWW_TIME, '%I:%M')}
          )
          (label :xalign 0 :class "txt-smallie txt"
            :text {formattime(EWW_TIME, '%A, %d/%m')}
          )
        )
        (box
          :hexpand true :valign "center"
          :space-evenly false
          :class "bar-batt-bottom"
          (label :xalign 0
            :valign "center"
            :hexpand true
            :class "bar-batt-percentage-bottom txt-norm"
            :text "${memory.used} + ${memory.swapused}"
          )
          (overlay
            (box :class "bar-circ-bottom-size")
            (circular-progress
              :halign "end" :valign "center"
              :class "bar-batt-circ"
              :value {memory.percentage}
              :thickness 3
              :start-at 75
              :hexpand true :valign "center"
              (box :class "bar-batt-circ-inside")
            )
            (circular-progress
              :halign "end" :valign "center"
              :value {memory.swappercentage}
              :thickness 3
              :start-at 75
              :class "bar-batt-circ-layer2"
              :hexpand true :valign "center"
              (box :class "bar-batt-circ-layer2-inside")
            )
          )
        )
        (box
          :hexpand true :valign "center"
          :space-evenly false
          :class "bar-batt-bottom${battery.percentage <= BATTERY_LOW ? '-low' : ''}"
          :tooltip "Battery: ${battery.percentage}%"
          (label :xalign 0
            :valign "center"
            :hexpand true
            :class "bar-batt-percentage-bottom txt-norm"
            :text {battery.status == ' left' || battery.status == ' to full' ? "${battery.percentage}%" : battery.status}
          )
          (box :class "bar-circ-bottom-size"
            (circular-progress
              :halign "end" :valign "center"
              :value {battery.percentage}
              :thickness 3
              :start-at 75
              :class "bar-batt-circ${battery.percentage <= BATTERY_LOW ? '-low' : ''}"
              :hexpand true :valign "center"
              (box
                :valign "center" :halign "center"
                :class "bar-batt-chargestate-bottom${battery.quickicon == '' ? '' : (battery.percentage <= BATTERY_LOW ? '-charging-low' : '-charging')}"
              )
            )
          )
        )
      )
    )
  )
)