(defwindow topBar
  :monitor 0 
  :stacking "fg"
  :windowtype "normal"
  :wm-ignore true
  :exclusive true
  :geometry (geometry
              :width "100%"
              :height "32px"
              :anchor "top center")
  (topBar))

(defwidget topBar []
  (overlay
    :class "topBar"
    (centerbox
      (box
        :halign "start"
        :spacing 12
        :space-evenly false
        (label :text " ")
        (cpu)
        (sep)
        (mem)
      )
      (box
        :halign "center"
        (label :text "Hi, jade! :3")
      )
      (box
        :halign "end"
        (time)
      )
    )
    (box
      :class "transFlag"
      :height 1
      ( flagEl :color "#5BCEFA")
      ( flagEl :color "#F5A9B8")
      ( flagEl :color "#FFFFFF")
      ( flagEl :color "#F5A9B8")
      ( flagEl :color "#5BCEFA")
    )
  )
)

(defwidget sep [] 
  (label :text "|")
)

(defwidget time []
  (label 
    :markup { 
      formattime(
        EWW_TIME, 
        "<span foreground=\"#d65d0e\"></span> %Y<span foreground=\"#7c6f64\">-</span>%m<span foreground=\"#7c6f64\">-</span>%d <span foreground=\"#d65d0e\"></span> %H<span foreground=\"#7c6f64\">:</span>%M<span foreground=\"#7c6f64\">:</span>%S "
      ) 
    }
  )
)

(defwidget cpu [] 
  (box
    :class "cpuIndicator"
    (label
      :markup "<span foreground=\"#d65d0e\"></span> ${strlength(round(EWW_CPU.avg, 0)) == 1 ? " ${round(EWW_CPU.avg, 0)}" : round(EWW_CPU.avg, 0)}<span foreground=\"#7c6f64\">%</span>"
    )
  )
)

(defwidget mem []
  (box 
    :class "memIndicator"
    (label
      :markup "<span foreground=\"#d65d0e\"> </span> ${round(EWW_RAM.used_mem_perc, 0)}<span foreground=\"#7c6f64\">%</span>"
    )
  )
)

(defwidget flagEl [color]
  (box
    :style "border-bottom: 2px solid ${color}"
    :halign "fill"
  )
)