// Centering the content within the ApplicationWindow
Column {
    spacing: 20
    width: parent.width * 0.8  // Control the width of the form

    anchors.centerIn: parent  // This centers the entire Column inside the parent (ApplicationWindow)

    // Main Label with Styling
    Label {
        text: "Demo App"
        font.pointSize: 24
        font.bold: true
        color: "#00796b"  // Color for the label (text color)
        horizontalAlignment: Text.AlignHCenter
        anchors.horizontalCenter: parent.horizontalCenter  // Center the label horizontally
    }

    // Text Input Section with Label
    Row {
        spacing: 20
        anchors.horizontalCenter: parent.horizontalCenter

        Label {
            text: "Enter your name:"
            font.pointSize: 14
            width: 150
            color: "#00796b"  // Label text color
        }

        TextField {
            objectName: "nameInput"
            id: nameInput
            placeholderText: "Type your name here"
            width: 200
            font.pointSize: 14
            padding: 10
            background: Rectangle {
                color: "#ffffff"
                radius: 5
                border.color: "#00796b"
                border.width: 1
            }
        }
    }

    // Drop Down Section with Label
    Row {
        spacing: 20
        anchors.horizontalCenter: parent.horizontalCenter

        Label {
            text: "Select your country:"
            font.pointSize: 14
            width: 150
            color: "#00796b"  // Label text color
        }

        ComboBox {
            objectName: "countrySelector"
            id: countrySelector
            model: ["India", "USA", "UK", "Canada", "Australia"]
            width: 200
            font.pointSize: 14
            background: Rectangle {
                color: "#ffffff"
                radius: 5
                border.color: "#00796b"
                border.width: 1
            }

            // Text styling for ComboBox items
            contentItem: Item {
                Text {
                    text: styleData.value
                    font.pointSize: 14
                    color: "#00796b"
                }
            }

            onActivated: {
                console.log("Selected country: " + countrySelector.currentText);
            }
        }
    }

    // Submit Button with Style
    Button {
        objectName: "submitButton"
        id: submitButton
        text: "Submit"
        width: 200
        height: 40
        font.pointSize: 16
        background: Rectangle {
            color: "#00796b"  // Green color
            radius: 5
        }
        contentItem: Text {
            text: "Submit"
            color: "white"  // Text color inside the button
        }
        onClicked: {
            console.log("Name: " + nameInput.text);
            console.log("Country: " + countrySelector.currentText);
            responseLabel.text = "Hello, " + nameInput.text + " from " + countrySelector.currentText + "!";
        }
        anchors.horizontalCenter: parent.horizontalCenter  // Center the button horizontally
    }

    // Clear Button with Style
    Button {
        objectName: "cleanButton"
        id: cleanButton
        text: "Clear"
        width: 200
        height: 40
        font.pointSize: 16
        background: Rectangle {
            color: "#d32f2f"  // Red color
            radius: 5
        }
        contentItem: Text {
            text: "Clear"
            color: "white"  // Text color inside the button
        }
        onClicked: {
            nameInput.text = "";
            countrySelector.currentIndex = -1; // Deselect dropdown
            responseLabel.text = "Fields cleared!";
        }
        anchors.horizontalCenter: parent.horizontalCenter  // Center the button horizontally
    }

    // Response Label with Styling
    Label {
        id: responseLabel
        text: "Fill in the details and click Submit."
        font.pointSize: 16
        color: "#00796b"
        wrapMode: Text.WordWrap
        horizontalAlignment: Text.AlignHCenter
        width: parent.width
        padding: 10
        font.bold: true
        background: Rectangle {
            color: "#ffffff"
            radius: 5
            border.color: "#00796b"
            border.width: 1
        }
        anchors.horizontalCenter: parent.horizontalCenter  // Center the label horizontally
    }
}