(defvar reveal_vpn false)
(defwidget vpn []
  (revealer-on-hover
    :class "${reveal_vpn} vpn"
    :revealvar reveal_vpn
    :revealvar-name "reveal_vpn"
    (button :onclick 'notify-send "TODO"'
            :class "revealer-preview ${(jq(network_manager.vpns, '[ .[] | select(.active=="yes") ] | length') > 0 ? 'active' : 'inactive')}"
      "${(jq(network_manager.vpns, '[ .[] | select(.active=="yes") ] | length') > 0 ? '' : '')}")
    (vpn_children :array "${network_manager.vpns}")))

(defwidget vpn_children [array]
  (box :class "reveal-children"
    :orientation "h"
    :space-evenly false
    :halign "center"
    (for vpn in array
      (button :onclick "nmcli connection ${( vpn.active == 'yes' ? 'down' : 'up' )} ${vpn.device}"
        :class {( vpn.active == "yes" ? 'active' : 'inactive' )}
        :tooltip "${vpn.name}"
        "${( vpn.name =~ '^[Hh]ome.*' ? 
          ( vpn.name =~ '.*[Ff]ull.*' ? '' : '') : 
          ( vpn.name =~ '^pia-.*' ? 
            ( vpn.name =~ '.*sea.*' ? '' : '' ) :
          '' )
        )} ${( vpn.active == 'yes' ? '' : '' )}"
      )
    )
;    (button :onclick 'scripts/bar/nmcli-vpn "HomeVPN"'
;            :class {network_status.homevpn ? "active" : "inactive"}
;            " ${network_status.homevpn ? "" : ""}")
;    (button :onclick 'scripts/bar/nmcli-vpn "HomeVPN-Full"'
;            :class {network_status.homevpn_full ? "active" : "inactive"}
;            " ${network_status.homevpn ? "" : ""}")
;    (button :onclick 'scripts/bar/nmcli-vpn "ProtonVPN"'
;            :class {network_status.proton ? "active" : "inactive"}
;            " ${network_status.homevpn ? "" : ""}")
;    (button :onclick 'scripts/bar/nmcli-vpn "ProtonVPN-SC"'
;            :class {network_status.proton_sc ? "active" : "inactive"}
;            " ${network_status.proton ? "" : ""}")

  )
)