import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Layouts
import qs

Variants {
	model: Quickshell.screens
  // Variants so that we get a bar on all monitors
	delegate: WlrLayershell {
		// use wlrlayershell instead of panelwindow because it's almost the same except wlrlayershell is easier to work with
    id: root
    layer: WlrLayer.Top
    required property ShellScreen modelData
    screen: modelData
    implicitHeight: Appearance.appletRadHeight + 10
    color: 'transparent'
    anchors {
			top: true
      left: true
      right: true
		}
    margins {
    	right: 5
      left: 5
      top: 5
      bottom: 0
    }
		Rectangle {
			id: barContainer
      anchors.fill: parent
      color: Appearance.colBg
      radius: Appearance.appletRadHeight
			RowLayout {
				id: leftLayout
    	  spacing: Appearance.appletSpacing
      	anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
				Battery {
					//Layout.leftMargin: ((Appearance.appletRadHeight + 10) - Appearance.appletRadHeight) / 2 // to have the same padding on the left no matter what the height it
					Layout.leftMargin: 8 // ^ This but simpler i guess
				}
				Cpu {}
				Mem {}
			}
			RowLayout {
				id: centerLayout
				anchors.centerIn: parent
				MangoWs {}
			}
			RowLayout {
				id: rightLayout
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
				Tray {}
				Pw {}
				Clock {
					//Layout.rightMargin: ((Appearance.appletRadHeight + 10) - Appearance.appletRadHeight) / 2 // to have the same padding on the left no matter what the height it
					Layout.rightMargin: 8 // ^ This but again simpler?
				}
			}
		}
	}
}