{
	"i18n": true,
	"type": "tabs",
	"items": {
		// Main Page and generic Setting of Adapter & ESPHome Dashboard
		"_options": {
			"type": "panel",
			"label": "Main settings",
			"items": {

				// Header ESPHome communication details
				"howToConnect": {
					"type": "header",
					"text": "lblHeaderConnect",
					"size": 1
				},

				// Lines of text with details
				"headerHowToConnect-details-1": {
					"newLine": true,
					"type": "staticText",
					"text": "lblConnectDetails-Line-1",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				"headerHowToConnect-details-2": {
					"newLine": true,
					"type": "staticText",
					"text": "lblConnectDetails-Line-2",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"headerHowToConnect-details-3": {
					"newLine": true,
					"type": "staticText",
					"text": "lblConnectDetails-Line-3",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Mention & link to api.proto project
				"headerESPHomeDashboard-details-api.proto": {
					"type": "staticLink",
					"label": "api.proto",
					"href" : "https://github.com/esphome/esphome/blob/dev/esphome/components/api/api.proto",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				"emptyLine-6": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Text explaining ioBroker integration
				"headerHowToConnect-details-4": {
					"newLine": true,
					"type": "staticText",
					"text": "lblConnectIobroker",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				"emptyLine-7": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"emptyLine-8": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Header default credentials
				"defaultCredentials": {
					"type": "header",
					"text": "lblDefaultCredentials",
					"size": 1
				},

				// Explanation of usage and warning
				"headerDefaultCredentials-details-1": {
					"newLine": true,
					"type": "staticText",
					"text": "lblDefaultCredentials-Line-1",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"headerDefaultCredentials-details-2": {
					"newLine": true,
					"type": "staticText",
					"text": "lblDefaultCredentials-Line-2",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Credentials which will be stored (encrypted) in adapter config object
				"encryptionKey": {
					"newLine": true,
					"type": "password",
					"label": "lblEncryptionKey",
					"xs": 12,
					"sm": 3,
					"md": 3,
					"lg": 3,
					"xl": 3
				},
				"apiPass": {
					"type": "password",
					"label": "lblApiPass",
					"xs": 12,
					"sm": 2,
					"md": 2,
					"lg": 2,
					"xl": 2
				}
			}
		},

		// Tab devices
		"devices": {
			"type": "panel",
			"label": "Devices",
			"items": {

				// Enable/disable autodiscovery and store setting in adapter config object
				"autodiscovery": {
					"newLine": true,
					"type": "checkbox",
					"xs": 12,
					"sm": 3,
					"md": 3,
					"lg": 3,
					"xl": 3,
					"label": "lblAutoDiscovery"
				},

				"discoveryListeningAddress" : {
					"type": "ip",
					"xs": 12,
					"sm": 3,
					"md": 3,
					"lg": 3,
					"xl": 3,
					"default": "0.0.0.0",
					"label": "lblDiscoveryListeningAddress",
					"help": "hlpDiscoveryListeningAddress",
					"listenOnAllPorts" : true,
					"onlyIp4" : true
				},

				// Text to explain adapter must be running to load this table
				"details-1": {
					"newLine": true,
					"type": "staticText",
					"text": "lblTxtNoButtonsIfNotActive",
					"hidden": "_alive",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Input fields to ADD / Modify devices
				"deviceIP": {
					"newLine": true,
					"freeSolo": true,
//					"doNotSave": true,
					"type": "autocompleteSendTo",
					"command": "getDeviceIPs",
					"jsonData": "{ \"service\": \"${data.deviceInputIP}\" }",
					"xs": 12,
					"sm": 2,
					"md": 2,
					"lg": 2,
					"xl": 2,
					"label": "lblInputDeviceIP-content",
					"tooltip": "hlpInputDeviceIP",
					"help": "hlpInputDeviceIP"
				},
				"encryptionKey": {
					"type": "password",
					"label": "lblInputEncryptionKey",
					"doNotSave": true,
					"default": "",
					"tooltip": "hlpInputEncryptionKey",
					"help": "hlpInputEncryptionKey",
					"xs": 12,
					"sm": 4,
					"md": 4,
					"lg": 4,
					"xl": 4
				},
				"apiPassword": {
					"type": "password",
					"label": "lblInputApiPassword",
					"doNotSave": true,
					"default": "",
					"tooltip": "hlpInputApiPassword",
					"help": "hlpInputApiPassword",
					"xs": 12,
					"sm": 2,
					"md": 2,
					"lg": 2,
					"xl": 2
				},

				// Button do ADD / Modify devices, sends
				// Sends device IP and credentials to backend
				"_addUpdateDevice": {
					"newLine": true,
					"type": "sendTo",
					"label": "lbl_addUpdateDevice",
					"variant": "outlined",
					"showProcess" : true,
					"command": "_addUpdateDevice",
					"jsonData": "{ \"ip\": \"${data.deviceIP}\", \"encryptionKey\": \"${data.encryptionKey}\", \"apiPassword\": \"${data.apiPassword}\" }",
					"useNative": true,
					"disabled": "data.deviceIP===''",
					"hidden": "!_alive",
					"tooltip": "ttGetStationId",
					"help": "hlpGetStationId",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				"deleteDevice": {
					"newLine": true,
					"type": "sendTo",
					"label": "lblDelDevice",
					"variant": "outlined",
					"showProcess" : true,
					"command": "deleteDevice",
					"jsonData": "{ \"ip\": \"${data.deviceIP}\"}",
					"useNative": true,
					"disabled": "data.deviceIP===''",
					"hidden": "!_alive",
					"tooltip": "ttGetStationId",
					"help": "hlpGetStationId",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12,
					"confirm" : {
						"text" : "Are you sure to delete this device ? Alle states will be removed",
						"title" : "Confirm device Deletion",
						"ok" : "Delete Device",
						"cancel" : "Cancel",
						"type" : "warning"
					}
				},
                "header": {
                    "type": "header",
                    "size": 1,
                    "text": "Device List"
                },

                // Refresh table showing all devices
				// Sends message to backend to get all current known devices, their configuration and connection status
				"loadDevices": {
					"newLine": true,
					"type": "sendTo",
                    "defaultSendTo": "loadDevices", // das hier scheint mit useNative nicht zu funktionieren, die anfrage geht raus, aber das ergebnis wird nicht verwertet.
					"hidden": "!_alive",
					"command": "loadDevices",
					"jsonData": "{ \"date\": \"${data.templateTable}\"}",
					"label": "lblLoadDevices",
					"useNative": true,
					"variant": "outlined",
					"showProcess" : true,
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
                "header2": {
                    "type": "header",
                    "size": 3,
                    "hidden": "!data.newDevicesTable || data.newDevicesTable.length == 0",
                    "text": "newDevicesHeader"
                },
				// Table (provided by backend) of all devices and their connection status
				"newDevicesTable": {
					"type": "table",
					"noDelete": true,
					"newLine": true,
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12,
					"hidden": "!data.newDevicesTable || data.newDevicesTable.length == 0",
					"showSecondAddAt": 5,
					"items": [
						{
							"type": "text",
							"readOnly" : true,
							"attr": "MACAddress",
							"width": "33% ",
							"title": "MAC-Address",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"readOnly" : true,
							"attr": "deviceName",
							"width": "33% ",
							"title": "Device Name",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"attr": "ip",
							"readOnly" : true,
							"width": "33% ",
							"title": "IP Address",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							//ToDo add validation if IP-Address format
							//"validator": "const x={};for (const c of globalData.templateTable) {if (x[c.templateKey]==='x') return false; x[c.templateKey]='x';}; return true;",
							"validatorNoSaveOnError": true
						}
					]
				},
                "header3": {
                    "type": "header",
                    "size": 3,
                    "text": "existDevicesHeader"
                },
                "existingDevicesTable": {
					"type": "table",
					"noDelete": true,
					"newLine": true,
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12,
					"showSecondAddAt": 5,
					"items": [
						{
							"type": "text",
							"readOnly" : true,
							"attr": "MACAddress",
							"width": "15% ",
							"title": "MAC-Address",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"readOnly" : true,
							"attr": "deviceName",
							"width": "15% ",
							"title": "Device Name",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"attr": "ip",
							"readOnly" : true,
							"width": "15% ",
							"title": "IP Address",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							//ToDo add validation if IP-Address format
							//"validator": "const x={};for (const c of globalData.templateTable) {if (x[c.templateKey]==='x') return false; x[c.templateKey]='x';}; return true;",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"readOnly" : true,
							"attr": "connectState",
							"width": "15% ",
							"title": "Connection Status",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						}

					]
				}
			}
		},

		"ESPHomeDashboard": {
			"type": "panel",
			"label": "ESPHome Dashboard",
			"items": {

				// Header ESPHome
				"headerESPHomeDashboard": {
					"type": "header",
					"text": "lblHeaderMainPage",
					"size": 1
				},
				// Introduction text
				"introLine-1": {
					"type": "staticText",
					"text": "introLine-1",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"introLine-2": {
					"newLine": true,
					"type": "staticText",
					"text": "introLine-2",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				"emptyLine-1": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Mentioning & link to ESPHome project
				"headerESPHomeDashboard-details-3": {
					"newLine": true,
					"type": "staticText",
					"text": "ESPHomeCommunityLink",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"headerESPHomeDashboard-details-Link": {
					"type": "staticLink",
					"label": "esphome.io",
					"href" : "https://esphome.io/",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"emptyLine-2": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// ESPHome Dashboard Explanation
				"headerESPHomeDashboard-details-4": {
					"newLine": true,
					"type": "staticText",
					"text": "lblEnableESPHome",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// ESPHome Dashboard configuration
				"ESPHomeDashboardEnabled": {
					"newLine": true,
					"type": "checkbox",
					"xs": 12,
					"sm": 4,
					"md": 4,
					"lg": 4,
					"xl": 4,
					"label": "chkEnableESPHome"
				},
				"ESPHomeDashboardVersion": {
					"type": "autocompleteSendTo",
					"xs": 12,
					"sm": 6,
					"md": 6,
					"lg": 6,
					"xl": 6,
					"label": "lblESPHomeDashboardVersion",
					"help": "hlpESPHomeDashboardVersion",
					"command": "getESPHomeDashboardVersion",
					"jsonData": "{ \"service\": \"${data.deviceInputIP}\" }"
				},
				"ESPHomeDashboardIP": {
					"type": "autocompleteSendTo",
					"newLine": true,
					"freeSolo": true,
					"xs": 12,
					"sm": 5,
					"md": 5,
					"lg": 5,
					"xl": 5,
					"label": "lblESPHomeIP",
					"command": "getHostIp",
					"jsonData": "{ \"service\": \"${data.deviceInputIP}\" }"
				},

				// Explanation usage of IP-Address input field
				"headerESPHomeDashboard-details-5": {
					"newLine": true,
					"type": "staticText",
					"text": "lblDashboardLink",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Some empty lines to move next head a little down
				"emptyLine-3": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"emptyLine-4": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},
				"emptyLine-5": {
					"newLine": true,
					"type": "staticText",
					"text": "",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				"advanced": {
					"type": "panel",
					"label": "Advanced",
					"collapsable": true,
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12,
					"items": {
						"ESPHomeDashboardPort": {
							"type": "text",
							"text": "",
							"xs": 12,
							"sm": 2,
							"md": 2,
							"lg": 2,
							"xl": 2,
							"label": "lblESPHomePort"
						},
						"ESPHomeDashboardUrl": {
							"type": "text",
							"xs": 12,
							"sm": 12,
							"md": 12,
							"lg": 12,
							"xl": 12,
							"label": "URL of ESPHome Dashboard",
							onChange: {
								"alsoDependsOn": ["ESPHomeDashboardIP", "ESPHomeDashboardPort"],
								"calculateFunc": "`http://${data.ESPHomeDashboardIP}:${data.ESPHomeDashboardPort}`",
								"ignoreOwnChanges": true
							}
						}
					}
				},
			}
		},

		"ignoreList": {
			"type": "panel",
			"label": "Ignore List",
			"items": {

				// Table (stored in adapter instance native object), to be ignored for device discovery
				"ignoredDevices": {
					"type": "table",
					"newLine": true,
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12,
					"hidden": "data._templateTable[0].template == 'template.NewMessage'",
					"label": "lblIgnoreList",
					"showSecondAddAt": 5,
//					"useNative": true,
					"allowAddByFilter" : true,
					"items": [
						{
							"type": "text",
							"attr": "IP-Address",
							"width": "30% ",
							"title": "IP-Address",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							//ToDo add validation if IP-Address format
							//"validator": "const x={};for (const c of globalData.templateTable) {if (x[c.templateKey]==='x') return false; x[c.templateKey]='x';}; return true;",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"attr": "name",
							"width": "20% ",
							"title": "Name",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						},
						{
							"type": "text",
							"attr": "description",
							"width": "40% ",
							"title": "Description",
							"tooltip": "templateKeyTip",
							"filter": false,
							"sort": false,
							"default": "",
							"validatorNoSaveOnError": true
						}

					]
				}

			}
		},

		// YAML File Management Tab
		"yamlFiles": {
			"type": "panel",
			"label": "YAML Files",
			"items": {

				// Header for YAML file management
				"headerYamlManagement": {
					"type": "header",
					"text": "lblHeaderYamlManagement",
					"size": 1
				},

				// Information text
				"yamlManagementInfo": {
					"newLine": true,
					"type": "staticText",
					"text": "lblYamlManagementInfo",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// File upload section
				"uploadYamlHeader": {
					"newLine": true,
					"type": "header",
					"text": "lblUploadYamlHeader",
					"size": 2
				},

				// Upload information
				"uploadYamlInfo": {
					"newLine": true,
					"type": "staticText",
					"text": "lblUploadYamlInfo",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Filename input
				"uploadFilename": {
					"newLine": true,
					"type": "text",
					"label": "lblUploadFilename",
					"placeholder": "example.yaml",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 6,
					"xl": 6
				},

				// YAML content input
				"uploadContent": {
					"newLine": true,
					"type": "text",
					"label": "lblUploadContent",
					"multiline": true,
					"rows": 10,
					"placeholder": "esphome:\n  name: my-device\n  platform: ESP8266\n  board: nodemcuv2",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Upload button
				"uploadYamlButton": {
					"newLine": true,
					"type": "sendTo",
					"label": "lblUploadYamlButton",
					"command": "uploadYamlFile",
					"jsonData": "{\"filename\": \"${data.uploadFilename}\", \"content\": \"${data.uploadContent}\"}",
					"variant": "contained",
					"showProcess": true,
					"hidden": "!_alive",
					"disabled": "!data.uploadFilename || !data.uploadContent",
					"xs": 12,
					"sm": 12,
					"md": 6,
					"lg": 6,
					"xl": 6
				},

				// Refresh file list button
				"refreshYamlFiles": {
					"newLine": false,
					"type": "sendTo",
					"label": "lblRefreshYamlFiles",
					"command": "listYamlFiles",
					"defaultSendTo": "listYamlFiles",
					"data": "yamlFilesTable",
					"variant": "outlined",
					"showProcess": true,
					"hidden": "!_alive",
					"xs": 12,
					"sm": 12,
					"md": 6,
					"lg": 6,
					"xl": 6
				},

				// File list table
				"yamlFilesHeader": {
					"newLine": true,
					"type": "header",
					"text": "lblYamlFilesHeader",
					"size": 2
				},

				"yamlFilesTable": {
					"newLine": true,
					"type": "table",
					"noDelete": true,
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12,
					"hidden": "!_alive",
					"label": "lblYamlFilesTable",
					"items": [
						{
							"type": "text",
							"readOnly": true,
							"attr": "filename",
							"width": "40%",
							"title": "Filename",
							"filter": false,
							"sort": true,
							"default": ""
						},
						{
							"type": "text",
							"readOnly": true,
							"attr": "size",
							"width": "20%",
							"title": "Size",
							"filter": false,
							"sort": true,
							"default": ""
						},
						{
							"type": "text",
							"readOnly": true,
							"attr": "modified",
							"width": "40%",
							"title": "Modified",
							"filter": false,
							"sort": true,
							"default": ""
						}
					]
				},

				// File actions section
				"fileActionsHeader": {
					"newLine": true,
					"type": "header",
					"text": "lblFileActionsHeader",
					"size": 2
				},

				// Select filename for actions
				"selectedFilename": {
					"newLine": true,
					"type": "text",
					"label": "lblSelectedFilename",
					"placeholder": "example.yaml",
					"help": "hlpSelectedFilename",
					"xs": 12,
					"sm": 12,
					"md": 12,
					"lg": 12,
					"xl": 12
				},

				// Download button
				"downloadYamlButton": {
					"newLine": true,
					"type": "sendTo",
					"label": "lblDownloadYamlButton",
					"command": "downloadYamlFile",
					"jsonData": "{\"filename\": \"${data.selectedFilename}\"}",
					"variant": "outlined",
					"showProcess": true,
					"hidden": "!_alive",
					"disabled": "!data.selectedFilename",
					"xs": 12,
					"sm": 12,
					"md": 6,
					"lg": 6,
					"xl": 6
				},

				// Delete button
				"deleteYamlButton": {
					"newLine": false,
					"type": "sendTo",
					"label": "lblDeleteYamlButton",
					"command": "deleteYamlFile",
					"jsonData": "{\"filename\": \"${data.selectedFilename}\"}",
					"variant": "outlined",
					"color": "error",
					"showProcess": true,
					"hidden": "!_alive",
					"disabled": "!data.selectedFilename",
					"xs": 12,
					"sm": 12,
					"md": 6,
					"lg": 6,
					"xl": 6,
					"confirm": {
						"text": "cnfDeleteYamlText",
						"title": "cnfDeleteYamlTitle",
						"ok": "cnfDeleteYamlOk",
						"cancel": "cnfDeleteYamlCancel",
						"type": "warning"
					}
				}

			}
		}

//		"sandBox": {
//			"type": "panel",
//			"label": "sandBox",
//			"items": {
//			"sandBox": {
//				"type": "panel",
//				"label": "sandBox",
//				"items": {
//					"getDataFiles" : {
//						"newLine": true,
//						"type": "fileSelector",
//						"upload": "/",
//						"label": "Upload g-code file",
//						"help": "Here you can upload files, like g-code, to send to the printer",
//						"sm": 3,
//						"md": 3,
//						"lg": 3
//					}
//				}
//			}
//			}
//		}
	}
}