import QtQuick
import QtQuick.Controls

Item {
    id:root
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 10
    anchors.left: parent.left
    width: 700
    height: 60

    property int select: -1
    Component{
        id:theButton
        Button{
            id:theBtn
            width: 200
            height: 60
            font.pixelSize: 25
            flat: true

            property int theSelect:0

            contentItem: Text {
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                text: theBtn.text
                font: theBtn.font
                color: parent.theSelect === root.select ? "#3c3c96":"white"
            }

            background: Rectangle{
                color: parent.theSelect === root.select ? "#dce1f5":"#ff734b"
                radius: 5
            }

            onClicked: {
                if(root.select != theSelect){
                    root.select = theSelect
                }else{
                    root.select = 0
                }
            }
        }
    }

    Row{
        anchors.fill: parent
        anchors.bottomMargin: 0
        spacing: 10
        anchors.leftMargin: 10

        Loader{
            id:loader1
            sourceComponent: theButton
        }
        Loader{
            id:loader2
            sourceComponent: theButton
        }
        Loader{
            id:loader3
            sourceComponent: theButton
        }
        Loader{
            id:loader4
            sourceComponent: theButton
        }

    }

    Component.onCompleted: {
        loader1.item.theSelect = 1
        loader1.item.text = "Monitoring"

        loader2.item.theSelect = 2
        loader2.item.text = "Tools"

        loader3.item.theSelect = 3
        loader3.item.text = "Events"

        loader4.item.theSelect = 4
        loader4.item.text = "System"

    }
}