{
	"name": "form/nc/nc-define/nc-layout-editor/nc-layout-toolbar/nc-layout-toolbar.json",
	"layout": {
		"component": "div",
		"attribute": {
			"id": "nc-layout-toolbar",
			"option": "bottom attached",
			":style": "\"width: \" + toolWidth()",
			"class": ["toolbar-segment"]
		},
		"element": [
			{
				"component": "nc-row",
				"element": [
					{
						"component": "nc-col",
						"attribute": {
							"width": "auto"
						},
						"element": [
							{
								"component": "nc-header",
								"text": "Layout editor",
								"attribute": {
									"model": "hdr.layout_editor",
									"size": "medium"
								}
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"width": "6em",
							"class": ["nc-end-h"]
						},
						"element": [
							{
								"component": "nc-button",
								"attribute": {
									"class": ["small", "compact"],
									"v-on:click": "save"
								},
								"element": [
									{
										"component": "nc-translate",
										"text": "Save",
										"attribute": {
											"model": "hdr.save"
										}
									}
								]
							}
						]
					}
				]
			},
			{
				"component": "nc-row",
				"element": [
					{
						"component": "nc-label",
						"text": "{{ peg.parseAfterLast(rec.layout_name, '/') }}",
						"attribute": {
							"hdr": ""
						}
					}
				]
			},
			{
				"component": "nc-row",
				"element": [
					{
						"component": "nc-label",
						"text": "{{ rec.hover_node?.component ? rec.hover_node.component + ' ' + rec.hover_node.id : ' ' }}",
						"attribute": {
							"hdr": ""
						}
					}
				]
			},
			{
				"component": "nc-accordion",
				"element": [
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.property",
							"v-on:click.native": "rec.accordion_open.property = !rec.accordion_open.property"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.property ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Properties",
								"attribute": {
									"model": "hdr.properties"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.property"
						},
						"element": [
							{
								"component": "component",
								"attribute": {
									":is": "isContainerNode(rec.selected_node) ? \"nc-container-property\" : \"nc-element-property\""
								}
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.element",
							"v-on:click.native": "rec.accordion_open.element = !rec.accordion_open.element"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.element ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Elements",
								"attribute": {
									"model": "hdr.elements"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							"id": "nc-layout-element",
							":active": "rec.accordion_open.element"
						},
						"element": [
							{
								"component": "nc-layout-element"
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.style",
							"v-on:click.native": "rec.accordion_open.style = !rec.accordion_open.style"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.style ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Style",
								"attribute": {
									"model": "hdr.style"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.style"
						},
						"element": [
							{
								"component": "h4",
								"text": "Style"
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.tree",
							"v-on:click.native": "rec.accordion_open.tree = !rec.accordion_open.tree"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.tree ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Element tree",
								"attribute": {
									"model": "hdr.tree"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.tree"
						},
						"element": [
							{
								"component": "h4",
								"text": "Element tree"
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.template",
							"v-on:click.native": "rec.accordion_open.template = !rec.accordion_open.template"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.template ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Templates",
								"attribute": {
									"model": "hdr.elements"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.template"
						},
						"element": [
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-href",
										"text": "Login form"
									}
								]
							},
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-href",
										"text": "Logout form"
									}
								]
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.reuse_element",
							"v-on:click.native": "rec.accordion_open.reuse_element = !rec.accordion_open.reuse_element"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.reuse_element ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Reusable elements",
								"attribute": {
									"model": "hdr.elements"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.reuse_element"
						},
						"element": [
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-href",
										"text": "Header"
									}
								]
							},
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-href",
										"text": "Footer"
									}
								]
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.layout",
							"v-on:click.native": "rec.accordion_open.layout = !rec.accordion_open.layout"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.layout ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Layout",
								"attribute": {
									"model": "hdr.layout"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.layout"
						},
						"element": [
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-label-input",
										"text": "Component Name",
										"attribute": {
											"model": "rec.layout_component"
										}
									}
								]
							}
						]
					},
					{
						"component": "nc-accordion-title",
						"attribute": {
							":active": "rec.accordion_open.preference",
							"v-on:click.native": "rec.accordion_open.preference = !rec.accordion_open.preference"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.accordion_open.preference ? \"caret-down\" : \"caret-right\""
								}
							},
							{
								"component": "nc-label",
								"text": "Settings",
								"attribute": {
									"model": "hdr.preference"
								}
							}
						]
					},
					{
						"component": "nc-accordion-content",
						"attribute": {
							":active": "rec.accordion_open.preference"
						},
						"element": [
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-label",
										"text": "Column count",
										"attribute": {
											"model": "hdr.tool_column_count"
										}
									}
								]
							},
							{
								"component": "nc-row",
								"element": [
									{
										"component": "nc-input",
										"attribute": {
											"model": "rec.tool_column_count"
										}
									}
								]
							}
						]
					}
				]
			}
		]
	}
}
