import QtQuick
import QtQuick.Window
import QtQuick.Controls
import QtQuick.Layouts

Window {
    property int counter: 0

    id: window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle {
        id: page
        anchors.fill: parent
        anchors.centerIn: parent
        color: increment.down ? "blue" : decrement.down ? "red" : "lightgrey"

        Behavior on color {
            ColorAnimation {
                duration: 100
                target: page
                easing.type: Easing.InOutQuad
            }
        }

        GridLayout {
            anchors.centerIn: parent
            columns: 2

            Text {
                Layout.columnSpan: 2
                Layout.alignment: Qt.AlignHCenter
                text: qsTr("Hello World")
                font.pointSize: 24; font.bold: true
            }

            Button {
                id: increment
                text: "Increment"
                onClicked: window.counter++
            }

            Button {
                id: decrement
                text: "Decrement"
                onClicked: window.counter--
            }

            Text {
                Layout.columnSpan: 2
                Layout.alignment: Qt.AlignHCenter
                text: "The value is " + window.counter
            }
        }
    }
}