(defwidget themerctl []
  (box
    :orientation "v"
    :space-evenly false
    :halign "fill"
    :valign "fill"
    (eventbox
      :onclick "scripts/toggle-themer.sh --close &"
      (box
        :style "
        ${rev_themer ? '' : 'margin-top: -400px;'}
        ${anim_open_themer ? 'transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);' : 'transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);'}
        min-height: 1px;
        "
      )
    )
    (eventbox
      ; :onhoverlost "${EWW_CMD} close themer && ${EWW_CMD} update themer_open=false"
      (box
        :space-evenly false
        :orientation "v"
        :class "window window-themer"
        :style "
        ${rev_themer ? '' : 'margin-top: -400px;'}
        ${anim_open_themer ? 'transition: 200ms cubic-bezier(0.05, 0.7, 0.1, 1);' : 'transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);'}
        "
        (box
          :class "window-titlebar-themer"
          (label :class "window-text" :xalign 0 :text "THEMES")
        )
        (box
          :style "padding-left: 10px; padding-right: 10px; padding-top: 10px; font-size: 15pt;"
          :valign "start"
          :space-evenly false
          :spacing 4
          (button
            :class "themer-action-button themer-get"
            :onclick "scripts/colormanage get"
            ""
          )
          (button
            :class "themer-action-button themer-restore"
            :onclick "scripts/colormanage default"
            ""
          )
          (button
            :class "themer-action-button"
            :onclick "scripts/togglelight light"
            :tooltip "Light mode (for generating new themes)"
            ""
          )
          (button
            :class "themer-action-button"
            :onclick "scripts/togglelight dark"
            :tooltip "Dark mode (for generating new themes)"
            ""
          )
        )
        (label
          :class "themer-title"
          :text "Color profiles"
          :xalign 0
        )
        (box
          :space-evenly false
          :orientation "h"
          (label
            :class "themer-prompt"
            :text "Save "
          )
          (input
            :class "themer-input"
            :onaccept "scripts/colormanage save {}"
          )
        )
        (box
          :halign "start"
          :space-evenly false
          :orientation "h"
          (label
            :text "Load "
            :class "themer-prompt"
          )
          (input
            :class "themer-input"
            :onaccept "scripts/colormanage load {}"
          )
        )
        (label
          :class "themer-title"
          :text "Current pallete"
          :xalign 0
        )
        (box
          :spacing 3
          :orientation "h"
          :style "padding: 7px;"
          (box :class "themer-color-preview preview-0" )
          (box :class "themer-color-preview preview-1" )
          (box :class "themer-color-preview preview-2" )
          (box :class "themer-color-preview preview-3" )
          (box :class "themer-color-preview preview-4" )
          (box :class "themer-color-preview preview-5" )
          (box :class "themer-color-preview preview-6" )
          (box :class "themer-color-preview preview-7" )
        )
      )
    )
  )
)

(defwindow themer
  :wm-ignore true
  :stacking "overlay"
  :monitor 0
  :geometry (geometry
    :x "300px"
    :y "32px"
    :anchor "top right"
    ; :width "0px"
    ; :height "0px"
  )
  :focusable true
  (themerctl)
)

(defwidget themer []
  (eventbox
    :onhover "${EWW_CMD} update themer_hover=true"
    :onhoverlost "${EWW_CMD} update themer_hover=false"
    (button
      :class "themer-button-${themer_hover || themer_open}"
      :onclick "scripts/toggle-themer.sh"
      :style "font-family: 'Material Symbols Outlined';"
      ''
    )
  )
)