Page {
    id: page

    SilicaFlickable {
        id: settings
        width: page.width

        //contentHeight: column.height

        VerticalScrollDecorator { flickable: settings }

        function changeConnectionType(index) {
            if(index === 0) {
                x509cert.visible = true;
            }
        }

        function initPage() {
            changeConnectionType(connectionType.currentIndex);
        }

        Column {
            width: page.width
            spacing: Theme.paddingSmall
            PageHeader {
                title: "Required Settings"
            }

            Button {
                anchors.right: parent.right
                text: "Save"
            }

            Label {
                font.pixelSize: Theme.fontSizeSmall
                text: "Connection Name"
            }
            TextField {
                id: conname
                width: page.width
                placeholderText: "Enter connection name here"
            }

            Label {
                font.pixelSize: Theme.fontSizeSmall
                text: "Gateway"
            }
            TextField {
                id: gateway
                width: page.width
                placeholderText: "Enter gateway here"
                // regex for checking valid hostname or ip address
                validator: RegExpValidator { regExp: /^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$|^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/ }
            }

            Label {
                font.pixelSize: Theme.fontSizeSmall
                text: "Connection type"
            }
            ComboBox {
                id: connectionType
                width: page.width

                menu: ContextMenu {
                    MenuItem { text: "X.509 Certificates" }
                    //MenuItem { text: "X.509 With Password" } TODO
                }

                onCurrentIndexChanged: {
                    changeConnectionType(currentIndex);
                }
            }

            Column {
                id: x509cert
                width: page.width
                visible: false
                spacing: Theme.paddingSmall

                Label {
                    font.pixelSize: Theme.fontSizeSmall
                    text: "CA file"
                }
                Row {
                    width: page.width
                    TextField {
                        width: page.width - 64;
                        id: caFile
                        placeholderText: "CA file"
                    }
                    Button {
                        width: 64
                        text: "..."
                        onClicked: {
                            var dialog = pageStack.push("FileChooser.qml", {"file": caFile.text})
                            dialog.accepted.connect(function() {
                                caFile.text = dialog.file;
                            })
                        }
                    }
                }
                Label {
                    font.pixelSize: Theme.fontSizeSmall
                    text: "Certificate"
                }
                Row {
                    TextField {
                        width: page.width - 64;
                        id: certFile
                        placeholderText: "Certificate"
                    }
                    Button {
                        width: 64
                        text: "..."
                        onClicked: {
                            var dialog = pageStack.push("FileChooser.qml", {"file": certFile.text})
                            dialog.accepted.connect(function() {
                                certFile.text = dialog.file;
                            })
                        }
                    }
                }
                Label {
                    font.pixelSize: Theme.fontSizeSmall
                    text: "Key"
                }
                Row {
                    TextField {
                        width: page.width - 64;
                        id: keyFile
                        placeholderText: "Key"
                    }
                    Button {
                        width: 64
                        text: "..."
                        onClicked: {
                            var dialog = pageStack.push("FileChooser.qml", {"file": keyFile.text})
                            dialog.accepted.connect(function() {
                                keyFile.text = dialog.file;
                            })
                        }
                    }
                }

                Label {
                    font.pixelSize: Theme.fontSizeSmall
                    text: "Advanced Settings"
                }
                TextSwitch {
                    id: showAdvanced
                    width: page.width
                    text: "Show advanced settings"
                }

            }
        }

        Component.onCompleted: initPage();
    }
}