(defwidget overview []
  (box
    :space-evenly false
    :orientation "v"
    :class "thewholething"
    (eventbox
      :onclick "scripts/toggle-overview.sh --close &"
      :onmiddleclick "scripts/toggle-overview.sh --close &"
      :onrightclick "scripts/toggle-overview.sh --close &"
      :onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
    )
    (box
      :class "overview-search-area"
      :space-evenly false
      :halign "center"
      :orientation "v"
      (input
        :class "overview-search-box"
        :onchange "${EWW_CMD} update overview_query=\"{}\" && ${EWW_CMD} update overview_results=\"$(scripts/appsearch '{}')\" &"
        :onaccept "scripts/launchapp '${overview_results == '[]' ? {} : overview_results[0].exec}' &"
      )
    )
    (eventbox
      :onhoverlost `eww update overview_hover_name='{"class":"LMB: Focus | MMB: Close | RMB: Select/Move","title":"Activities Overview","workspace":{"id":5,"name":"5"},"icon": "/usr/share/icons/breeze-dark/actions/16/window.svg"}' &`
      :onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
      (revealer
        :reveal "${overview_query == ''}"
        :transition "slidedown"
        :duration "${overview_query == '' ? '200ms cubic-bezier(0.05, 0.7, 0.1, 1)' : '100ms cubic-bezier(0.3, 0, 0.8, 0.15)'}"
        :style "
        transition: ${overview_query == '' ? '200ms cubic-bezier(0.05, 0.7, 0.1, 1)' : '100ms cubic-bezier(0.3, 0, 0.8, 0.15)'};
        "
        (revealer
          :reveal "${overview_query == ''}"
          :transition "crossfade"
          :duration "${overview_query == '' ? '200ms cubic-bezier(0.05, 0.7, 0.1, 1)' : '100ms cubic-bezier(0.3, 0, 0.8, 0.15)'}"
          :style "
          transition: ${overview_query == '' ? '200ms cubic-bezier(0.05, 0.7, 0.1, 1)' : '100ms cubic-bezier(0.3, 0, 0.8, 0.15)'};
          "
          (box
            :space-evenly false
            :orientation "v"
            :class "overview-window"
            ; :space-evenly false
            ; (label :text "${wsjsona}")
            ; (label :text "${selected}")
            (centerbox
              :class "overview-window-title"
              (label :halign "start" :style "margin: 5px;" :text "${overview_hover_name.class}")
              (box
                :space-evenly false
                :orientation "h"
                ; ICON ICON ICON
                (box
                  :class "overview-topbar-icon overview-icon"
                  :style "
                  background-image: url('${overview_hover_name.icon}');
                  "
                )
                (label :text "${overview_hover_name.title}")
              )
              (button
                :halign "end"
                :class "overview-topbar-button"
                :onclick "scripts/toggle-overview.sh --close"
                (label :text "")
              )
            )
            (box
              :orientation "h"
              (for wspace in wsjsona
                (box ; Note: height 100px width 356px
                  :class "overview-ws overview-ws-${wspace[0].workspace.id == activews}"
                  (box
                    :space-evenly false
                    :orientation "h"
                    :style "
                    min-width: ${RES_WIDTH * OVERVIEW_SCALE}px;
                    min-height: ${RES_HEIGHT * OVERVIEW_SCALE}px;
                    "
                    (for ws-window in wspace
                      (box
                        :class "${ws-window.class == 'workspace' ? '' : 'overview-ws-window'}"
                        :style "
                        ${ws-window.address == selected ? 'border: 2px solid #FFFFFF' : ''};
                        ${ws-window.address == '_none' ? 'border: none' : ''};
                        margin-left: ${ws-window.at[0] * OVERVIEW_SCALE}px;
                        margin-top: ${ws-window.at[1] * OVERVIEW_SCALE}px;
                        margin-right: -${(ws-window.at[0] + ws-window.size[0]) * OVERVIEW_SCALE}px;
                        margin-bottom: ${RES_HEIGHT * OVERVIEW_SCALE - ((ws-window.at[1] + ws-window.size[1]) * OVERVIEW_SCALE)};
                        "
                        (eventbox
                          :onrightclick "scripts/selectwindow ${ws-window.address} '${EWW_CMD}' ${ws-window.workspace.id}"
                          :onmiddleclick "hyprctl dispatch closewindow address:${ws-window.address}"
                          :onclick "scripts/focuswindow ${ws-window.address} ${ws-window.workspace.id} && scripts/toggle-overview.sh --close &"
                          :onhover "${ws-window.class == 'workspace' ? '' : (EWW_CMD + ' update overview_hover_name=\'' + ws-window + '\'')}"
                          ; :onhover "${ws-window.class == 'workspace' ? '' : EWW_CMD} ${ws-window.class == 'workspace' ? '' : 'update overview_hover_name=\''}${ws-window.class == 'workspace' ? '' : ws-window.title}${ws-window.class == 'workspace' ? '' : '\' &'}"
                          (box
                            :class "overview-background"
                            ; Uncomment below to enable thumbnail previews (VERY SLOW)
                            ; :style "
                            ; background-image: url('scripts/cache/thumbnails/${ws-window.address }.png');
                            ; "
                            (box
                              :class "overview-icon"
                              :style "
                              background-size: ${ws-window.size[0] > ws-window.size[1] ? 'auto 45%' : '45% auto'};
                              background-image: url('${ws-window.icon}')
                              "
                            )
                          )
                        )
                      )
                    )
                  )
                )
              )
            )
            (box
              :orientation "h"
              (for wspace in wsjsonb
                (box ; Note: height 100px width 356px
                  :class "overview-ws overview-ws-${wspace[0].workspace.id == activews}"
                  (box
                    :space-evenly false
                    :orientation "h"
                    :style "
                    min-width: ${RES_WIDTH * OVERVIEW_SCALE}px;
                    min-height: ${RES_HEIGHT * OVERVIEW_SCALE}px;
                    "
                    (for ws-window in wspace
                      (box
                        :class "${ws-window.class == 'workspace' ? '' : 'overview-ws-window'}"
                        :style "
                        ${ws-window.address == selected ? 'border: 2px solid #FFFFFF' : ''};
                        ${ws-window.address == '_none' ? 'border: none' : ''};
                        margin-left: ${ws-window.at[0] * OVERVIEW_SCALE}px;
                        margin-top: ${ws-window.at[1] * OVERVIEW_SCALE}px;
                        margin-right: -${(ws-window.at[0] + ws-window.size[0]) * OVERVIEW_SCALE}px;
                        margin-bottom: ${RES_HEIGHT * OVERVIEW_SCALE - ((ws-window.at[1] + ws-window.size[1]) * OVERVIEW_SCALE)};
                        "
                        (eventbox
                          :onrightclick "scripts/selectwindow ${ws-window.address} '${EWW_CMD}' ${ws-window.workspace.id}"
                          :onmiddleclick "hyprctl dispatch closewindow address:${ws-window.address}"
                          :onclick "scripts/focuswindow ${ws-window.address} ${ws-window.workspace.id} && scripts/toggle-overview.sh --close &"
                          :onhover "${ws-window.class == 'workspace' ? '' : (EWW_CMD + ' update overview_hover_name=\'' + ws-window + '\'')}"
                          (box
                            :class "overview-background"
                            ; Uncomment below to enable thumbnail previews (VERY SLOW)
                            ; :style "
                            ; background-image: url('scripts/cache/thumbnails/${ws-window.address }.png');
                            ; "
                            (box
                              :class "overview-icon"
                              :style "
                              background-size: ${ws-window.size[0] > ws-window.size[1] ? 'auto 45%' : '45% auto'};
                              background-image: url('${ws-window.icon}')
                              "
                            )
                          )
                        )
                      )
                    )
                  )
                )
              )
            )
          )
        )
      )
    )
    (box
      :class "overview-search-area"
      :space-evenly false
      :halign "center"
      :orientation "v"
      (revealer
        :reveal "${overview_query != ''}"
        :transition "slidedown"
        :duration "${overview_query == '' ? '100ms cubic-bezier(0.3, 0, 0.8, 0.15)' : '200ms cubic-bezier(0.05, 0.7, 0.1, 1)'}"
        :style "
        transition: ${overview_query == '' ? '100ms cubic-bezier(0.3, 0, 0.8, 0.15)' : '200ms cubic-bezier(0.05, 0.7, 0.1, 1)'};
        "
        (revealer
          :reveal "${overview_query != ''}"
          :transition "crossfade"
          :duration "${overview_query == '' ? '100ms cubic-bezier(0.3, 0, 0.8, 0.15)' : '200ms cubic-bezier(0.05, 0.7, 0.1, 1)'}"
          :style "
          transition: ${overview_query == '' ? '100ms cubic-bezier(0.3, 0, 0.8, 0.15)' : '200ms cubic-bezier(0.05, 0.7, 0.1, 1)'};
          "
          (scroll
            :style "min-width: 452px; min-height: 547px;"
            (box
              :halign "center"
              :orientation "v"
              :class "overview-results"
              :spacing 2
              :space-evenly false
              (for entry in overview_results
                (box
                  :orientation "h"
                  ; (input
                    ;   :value "${entry.icon}"
                    ;   :class "overview-search-result"
                    ;   :onaccept "scripts/launchapp '${entry.exec}' &"
                  ; )
                  (input
                    :value "${entry.name} |  $ ${entry.exec}"
                    :class "overview-search-result"
                    :onaccept "scripts/launchapp '${entry.exec}' &"
                  )
                  ; (input
                    ;   :value "${entry.exec}"
                    ;   :class "overview-search-result"
                    ;   :onaccept "scripts/launchapp '{}' &"
                  ; )
                )
              )
            )
          )
        )
      )
    )
  )
)

(defwindow overview
  :stacking "overlay"
  :focusable true
  :wm-ignore true
  :monitor 0
  :geometry (geometry
    ; :height 1080
    ; :width 1920
    :y "103px"
    :anchor "top center"
    ; :y "0px"
    ; :anchor "center center"
  )
  ; (testing)
  (overview)
)