(defwidget wingamebarwidget []
  (box
    :space-evenly false
    :orientation "v"
    :class "thewholething"
    :height 1080
    :width 1920
    (overlay
      (box
        :height 1080
        :width 1920
        :class "wingamebar-overlay"
      )
      ; Controls
      (eventbox
        :onclick "scripts/toggle-wingamebar.sh --close"
        :onrightclick "scripts/toggle-wingamebar.sh --close"
        :onmiddleclick "scripts/toggle-wingamebar.sh --close"
        (box :space-evenly false
          :style "
          margin-left: ${RES_WIDTH / 2 + ((gamebarwidgets.controls.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.controls.size[0] / 2)};
          margin-top: ${RES_HEIGHT / 2 + ((gamebarwidgets.controls.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.controls.size[1] / 2)};
          margin-right: ${RES_WIDTH - (RES_WIDTH / 2 + ((gamebarwidgets.controls.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.controls.size[0] / 2))};
          margin-bottom: ${RES_HEIGHT - (RES_HEIGHT / 2 + ((gamebarwidgets.controls.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.controls.size[1] / 2))};
          "
          :class "wingamebar-window"
          :halign "center"
          (box :space-evenly false :orientation "h"
            :class "wingamebar-control-sidesection-left"
            (button
              :class "wingamebar-control-button"
              (label :class "win-segoeicon wingamebar-control-button" :text "")
            )
          )
          (box
            :class "wingamebar-control-appsection"
            (button
              :class "wingamebar-control-button-active"
              (label :class "win-segoeicon wingamebar-control-button" :text "")
            )
            (button
              :class "wingamebar-control-button-active"
              (label :class "win-segoeicon wingamebar-control-button" :text "")
            )
            (button
              :class "wingamebar-control-button-active"
              (label :class "win-segoeicon wingamebar-control-button" :text "")
            )
          )
          (box :space-evenly false :orientation "h"
            :class "wingamebar-control-sidesection-right"
            (label :class "wingamebar-text wingamebar-text-clock" :text {time12})
          )
        )
      )
      ; Capture
      (box
        :style "
        margin-left: ${RES_WIDTH / 2 + ((gamebarwidgets.capture.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.capture.size[0] / 2)};
        margin-top: ${RES_HEIGHT / 2 + ((gamebarwidgets.capture.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.capture.size[1] / 2)};
        margin-right: ${RES_WIDTH - (RES_WIDTH / 2 + ((gamebarwidgets.capture.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.capture.size[0] / 2))};
        margin-bottom: ${RES_HEIGHT - (RES_HEIGHT / 2 + ((gamebarwidgets.capture.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.capture.size[1] / 2))};
        "
        :class "wingamebar-window"
        :orientation "v" :space-evenly false
        (centerbox
          :class "wingamebar-titlebar"
          :valign "start" :height 33
          (box
            :space-evenly false :spacing 10
            (label :xalign 0 :class "wingamebar-icon" :text "")
            (label :xalign 0 :class "wingamebar-text" :text "Capture")
          )
          (box)
          (label :halign "end" :xalign 1 :class "wingamebar-title" :text "")
        )
        (box
          :class "wingamebar-capture"
          :space-evenly false :spacing 21
          (button
            :valign "start"
            :class "wingamebar-capture-button wingamebar-button"
            :onclick "scripts/toggle-wingamebar.sh --close && grim ~/Pictures/Screenshots/screenshot_$(date '+%Y_%m_%_d..%H.%M').png &"
            (label :class "win-segoeicon" :text "")
          )
          (button
            :valign "start"
            :class "wingamebar-capture-button-unavailable"
            (label :class "win-segoeicon" :text "")
          )
          (button
            :valign "start"
            :class "wingamebar-capture-button wingamebar-button"
            :onclick "scripts/toggle-wingamebar.sh --close && ~/.local/bin/record-script.sh ${record_sound ? '--sound ' : ''}&"
            (label :class "win-segoeicon" :text "")
          )
          (button
            :valign "start"
            :class "wingamebar-capture-button wingamebar-button"
            :onclick "${EWW_CMD} update record_sound='${!record_sound}'"
            (label :class "win-segoeicon" :text "${record_sound ? '' : ''}")
          )
        )
        (label :xalign 0 :class "wingamebar-content wingamebar-text wingamebar-subtext" :text {awin.title} :limit-width 38)
        (eventbox
          :class "wingamebar-button-pad"
          :onclick "scripts/toggle-wingamebar.sh --close && xdg-open ~/Videos &"
          (box
            :class "wingamebar-content wingamebar-capture-bottom"
            :space-evenly false :spacing 8
            (label :class "win-segoeicon" :text "")
            (label :class "wingamebar-text" :text "See my captures")
          )
        )
      )
      ; Autio
      (box
        :style "
        margin-left: ${RES_WIDTH / 2 + ((gamebarwidgets.audio.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.audio.size[0] / 2)};
        margin-top: ${RES_HEIGHT / 2 + ((gamebarwidgets.audio.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.audio.size[1] / 2)};
        margin-right: ${RES_WIDTH - (RES_WIDTH / 2 + ((gamebarwidgets.audio.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.audio.size[0] / 2))};
        margin-bottom: ${RES_HEIGHT - (RES_HEIGHT / 2 + ((gamebarwidgets.audio.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.audio.size[1] / 2))};
        "
        :orientation "v" :space-evenly false
        :class "wingamebar-window"
        (centerbox
          :class "wingamebar-titlebar"
          :valign "start" :height 33
          (box
            :space-evenly false :spacing 10
            (label :xalign 0 :class "wingamebar-icon" :text "")
            (label :xalign 0 :class "wingamebar-text" :text "Audio")
          )
          (box)
          (label :halign "end" :xalign 1 :class "wingamebar-title" :text "")
        )
        ; Select audio/mic
        (box
          :space-evenly false :orientation "h"
          :class "wingamebar-navbar"
          (button
            :class "wingamebar-navbar-button"
            (label :class "wingamebar-text" :text "MIX")
          )
        )
        ; System volume
        (box
          :space-evenly false :orientation "v"
          :class "wingamebar-audio-sys"
          (label :xalign 0 :class "wingamebar-text wingamebar-text-small wingamebar-subtext"
            :text "DEFAULT  OUTPUT"
          )
          (label :xalign 0 :class "wingamebar-text" :style "padding-top: 21px; padding-bottom: 7px;"
            :text {audiodevice} :limit-width 37
          )
          (box
            :space-evenly false :orientation "h"
            (button
              :class "winicon winvol${volume.audio == 1 ? round(volume.percent / 33, 0) : 'mute'}"
              :onclick "scripts/volume mute SINK &"
            )
            (scale
              :value "${volume.percent}"
              :onchange "scripts/volume setvol SINK {}"
              :class "winslider winslider-gamebar-sys"
            )
          )
        )
        ; (scroll
          ;   :height 576
          (box
            :space-evenly false :orientation "v"
            (for app in audiojson
              (box
                :orientation "v" :space-evenly false :spacing 17
                :style "margin-top: 17px;"
                (for ser in {app["volume"]}
                  (eventbox
                    :onscroll "pactl set-sink-input-volume ${ser[0]} $(echo {} | sed -e \"s/up/+5/g\" -e \"s/down/-5/g\")%"
                    :onrightclick "pactl set-sink-input-volume ${ser[0]} 100%"
                    :onclick "pactl set-sink-input-volume ${ser[0]} 0%"
                    (box :orientation "h" :space-evenly false :spacing 17
                      (image :class "wingamebar-audio-appicon" :image-width 37 :image-height 37
                        :path {app.icon}
                      )
                      (box :space-evenly false :orientation "v"
                        (label :xalign 0 :class "wingamebar-text" :text "${app.name} #${ser[0]}")
                        (box
                          :space-evenly false :orientation "h"
                          (button
                            :class "winicon winvol${round((ser[1] < 100 ? ser[1] : 100) / 33, 0)}"
                            :style "margin-right: 2px;"
                          )
                          (scale
                            :value {ser[1] <= 100 ? ser[1] : 100}
                            :onchange "pactl set-sink-input-volume ${ser[0]} {}%"
                            :class "winslider winslider-gamebar-app"
                          )
                        )
                      )
                    )
                  )
                )
              )
            )
          ; )
        )
      )
      ; Performancee
      (box :orientation "v" :space-evenly false
        :style "
        margin-left: ${RES_WIDTH / 2 + ((gamebarwidgets.performance.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.performance.size[0] / 2)};
        margin-top: ${RES_HEIGHT / 2 + ((gamebarwidgets.performance.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) - (gamebarwidgets.performance.size[1] / 2)};
        margin-right: ${RES_WIDTH - (RES_WIDTH / 2 + ((gamebarwidgets.performance.at[0] - (RES_WIDTH / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.performance.size[0] / 2))};
        margin-bottom: ${RES_HEIGHT - (RES_HEIGHT / 2 + ((gamebarwidgets.performance.at[1] - (RES_HEIGHT / 2)) * (rev_wingamebar ? 1 : 1.03)) + (gamebarwidgets.performance.size[1] / 2))};
        "
        :class "wingamebar-window"
        (centerbox
          :class "wingamebar-titlebar"
          :valign "start" :height 33
          (box
            :space-evenly false :spacing 10
            (label :xalign 0 :class "wingamebar-icon" :text "")
            (label :xalign 0 :class "wingamebar-text" :text "Performance")
          )
          (box)
          (label :halign "end" :xalign 1 :class "wingamebar-title" :text "")
        )
        (box :orientation "h" :space-evenly false
          (box :orientation "v" :space-evenly false
            :class "wingamebar-performance-metricscolumn"
            (button
              :class "wingamebar-performance-metric-${resource_metric == 'cpu'}"
              :onclick "${EWW_CMD} update resource_metric='cpu' &"
              (label :xalign 0 :class "wingamebar-text"
                :text "CPU ${round(EWW_CPU.avg, 0)}%"
              )
            )
            (button
              :class "wingamebar-performance-metric-${resource_metric == 'ram'}"
              :onclick "${EWW_CMD} update resource_metric='ram' &"
              (label :xalign 0 :class "wingamebar-text"
                :text "RAM ${round(memory.percentage, 0)}%"
              )
            )
            (button
              :class "wingamebar-performance-metric-${resource_metric == 'swap'}"
              :onclick "${EWW_CMD} update resource_metric='swap' &"
              (label :xalign 0 :class "wingamebar-text"
                :text "SWAP ${round(memory.swappercentage, 0)}%"
              )
            )
          )
          ; Graph
          (box :width 236 :height 191 :space-evenly false
            :class "wingamebar-performance-grapharea"
            (revealer :reveal {resource_metric == 'cpu'}
              :transition "slideright" :duration "0ms"
              (overlay
                (box
                  :width 236 :height 191
                  :orientation "v" :space-evenly false
                  :class "wingamebar-performance-graph-graphpad"
                  (graph
                    :width 202 :height 117
                    :class "wingamebar-graph"
                    :value {round(EWW_CPU.avg, 0)}
                    :thickness 3
                    :time-range "30s"
                    :line-style "round"
                  )
                )
                (centerbox
                  :width 236 :height 191
                  :orientation "v" :space-evenly false
                  :class "wingamebar-performance-graphpad"
                  (box :space-evenly false :orientation "v"
                    (centerbox
                      (label :xalign 0 :class "wingamebar-text wingamebar-text-bigmetric" :text "${round(EWW_CPU.avg, 0)}%")
                      (box)
                      (label :xalign 1 :yalign 0 :class "wingamebar-text wingamebar-text-small" :text "100")
                    )
                    (label :xalign 0 :class "wingamebar-text wingamebar-subtext wingamebar-text-small" :text "${EWW_CPU['cores'][0]['freq']} MHz")
                  )
                  (box)
                  (centerbox
                    :valign "end"
                    (label :xalign 0 :class "wingamebar-text wingamebar-subtext wingamebar-text-small" :text "30 SECONDS")
                    (box)
                    (label :xalign 1 :yalign 1 :class "wingamebar-text wingamebar-text-small" :text "0")
                  )
                )
              )
            )
            (revealer :reveal {resource_metric == 'ram'}
              :transition "slideright" :duration "0ms"
              (overlay
                (box
                  :width 236 :height 191
                  :orientation "v" :space-evenly false
                  :class "wingamebar-performance-graph-graphpad"
                  (graph
                    :width 202 :height 117
                    :class "wingamebar-graph"
                    :value {round(memory.percentage, 0)}
                    :thickness 3
                    :time-range "30s"
                    :line-style "round"
                  )
                )
                (centerbox
                  :width 236 :height 191
                  :orientation "v" :space-evenly false
                  :class "wingamebar-performance-graphpad"
                  (box :space-evenly false :orientation "v"
                    (centerbox
                      (label :xalign 0 :class "wingamebar-text wingamebar-text-bigmetric" :text "${round(memory.percentage, 0)}%")
                      (box)
                      (label :xalign 1 :yalign 0 :class "wingamebar-text wingamebar-text-small" :text "100")
                    )
                    (label :xalign 0 :class "wingamebar-text wingamebar-subtext wingamebar-text-small" :text "${memory.used}b")
                  )
                  (box)
                  (centerbox
                    :valign "end"
                    (label :xalign 0 :class "wingamebar-text wingamebar-subtext wingamebar-text-small" :text "30 SECONDS")
                    (box)
                    (label :xalign 1 :yalign 1 :class "wingamebar-text wingamebar-text-small" :text "0")
                  )
                )
              )
            )
            (revealer :reveal {resource_metric == 'swap'}
              :transition "slideright" :duration "0ms"
              (overlay
                (box
                  :width 236 :height 191
                  :orientation "v" :space-evenly false
                  :class "wingamebar-performance-graph-graphpad"
                  (graph
                    :width 202 :height 117
                    :class "wingamebar-graph"
                    :value {round(memory.swappercentage, 0)}
                    :thickness 3
                    :time-range "30s"
                    :line-style "round"
                  )
                )
                (centerbox
                  :width 236 :height 191
                  :orientation "v" :space-evenly false
                  :class "wingamebar-performance-graphpad"
                  (box :space-evenly false :orientation "v"
                    (centerbox
                      (label :xalign 0 :class "wingamebar-text wingamebar-text-bigmetric" :text "${round(memory.swappercentage, 0)}%")
                      (box)
                      (label :xalign 1 :yalign 0 :class "wingamebar-text wingamebar-text-small" :text "100")
                    )
                    (label :xalign 0 :class "wingamebar-text wingamebar-subtext wingamebar-text-small" :text "${memory.swapused}b")
                  )
                  (box)
                  (centerbox
                    :valign "end"
                    (label :xalign 0 :class "wingamebar-text wingamebar-subtext wingamebar-text-small" :text "30 SECONDS")
                    (box)
                    (label :xalign 1 :yalign 1 :class "wingamebar-text wingamebar-text-small" :text "0")
                  )
                )
              )
            )
          )
        )
      )
    )
  )
)

(defwindow wingamebar
  :stacking "overlay"
  :focusable true
  :wm-ignore true
  :monitor 0
  :namespace "gamebar"
  :geometry (geometry
    :height "100%"
    :width "100%"
    :anchor "center center"
  )
  (wingamebarwidget)
)