{
	"name": "form/nc/nc-work-center/nc-work-center.json",
	"layout": {
		"component": "nc-form",
		"attribute": {
			"id": "nc-work-center"
		},
		"element": [
			{
				"component": "nc-modal",
				"attribute": {
					"closeOnClick": "outside",
					":header": "hdr.work_center.preview_modal?.header",
					":ok-text-": "hdr.work_center.preview_modal?.ok",
					":show": "rec.document_preview_modal === true",
					"v-on:modal-cancel": "openDocumentPreview('close')",
					"v-on:modal-ok": "openDocumentPreview('close')"
				},
				"element": [
					{
						"component": "nc-document-preview",
						"attribute": {
							"id": "nc-document-preview-modal-canvas",
							":loadable": "rec.document_loadable",
							":name": "rec.document_name",
							":src": "rec.document_data",
							":viewStyle": "rec.document_style_fullpage"
						}
					}
				]
			},
			{
				"component": "nc-row",
				"attribute": {
					":style": "{'margin-top': '-1.25em', 'height': rec.tab_open ? '4.5em' : '0.1em'}"
				},
				"element": [
					{
						"component": "nc-col",
						"attribute": {
							"width": "0.5em",
							"style": "margin-left: -1.25em",
							"v-on:click": "tabChanged('open')"
						},
						"element": [
							{
								"component": "nc-icon",
								"attribute": {
									":icon": "rec.tab_open ? 'caret-down' : 'caret-right'",
									":style": "rec.tab_open ? 'margin-top: -1.9em; margin-left: -0.20em' : 'margin-top: 0.4em; '"
								}
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"v-if": "rec.tab_open",
							"width": "auto",
							"style": "margin-bottom: 0.5em;"
						},
						"element": [
							{
								"component": "nc-tab",
								"attribute": {
									"model": "rec.tab",
									"v-on:change": "tabChanged('tab')"
								}
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"v-if": "rec.tab_open",
							"width": "20em",
							"class": ["nc-margin-left"]
						},
						"element": [
							{
								"component": "nc-label-dropdown",
								"text": "Connection",
								"attribute": {
									"model": "rec.connection",
									"v-on:change": "tabChanged('tab')"
								}
							}
						]
					}
				]
			},
			{
				"component": "nc-row",
				"attribute": {
					"v-if": "rec.tab !== 'work-center'"
				},
				"element": [
					{
						"component": "nc-grid",
						"attribute": {
							"id": "external",
							"model": "grid.external",
							":doesExternalFilterPass-": "doesExternalFilterPass",
							":isExternalFilterPresent-": "isExternalFilterPresent",
							":height": "gridHeight('external')",
							"style": "width: 100%;",
							"v-on:grid-row-clicked": "gridRowClicked",
							"v-on:grid-row-double-clicked": "gridRowDoubleClicked"
						}
					}
				]
			},
			{
				"component": "nc-row",
				"attribute": {
					"v-if": "rec.tab === 'work-center'"
				},
				"element": [
					{
						"component": "transition",
						"attribute": {
							"name": "nc-slide-down",
							"v-on:after-enter": "slideDownAfterEnter",
							"v-on:after-leave": "slideDownAfterLeave",
							"v-on:before-enter": "slideDownBeforeEnter",
							"v-on:before-leave": "slideDownBeforeLeave",
							"v-on:enter": "slideDownEnter",
							"v-on:leave": "slideDownLeave"
						},
						"element": [
							{
								"component": "nc-row",
								"attribute": {
									"id": "edit"
								},
								"element": [
									{
										"component": "nc-col",
										"attribute": {
											"width": "21em"
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-dropdown",
														"text": "Person",
														"attribute": {
															"label-style": "width: 5em;",
															"model": "rec.person",
															":dropdown-style": "!rec.person ? 'outline: 2px dashed crimson; margin-left: -1px;' : ''",
															"v-on:change": "dropdownChange('person')"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-dropdown",
														"text": "Machine",
														"attribute": {
															"label-style": "width: 5em;",
															"model": "rec.machine",
															"v-on:change": "dropdownChange('machine')"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"v-if": "false",
											"width": "2em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-button",
												"attribute": {
													"id": "clear-person-button",
													"v-on:click": "emptyPersonState()",
													"size": "tiny",
													"style": "width: 2em; padding-left: 0.3em",
													":disabled": "!rec.person",
													"icon": "backspace"
												}
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "63em",
											"class": ["work-center-button-group"]
										},
										"element": [
											{
												"component": "nc-row",
												"attribute": {
													"class": ["nc-align-top"]
												},
												"element": [
													{
														"component": "nc-col",
														"attribute": {
															"width": "18em"
														},
														"element": [
															{
																"component": "nc-row",
																"attribute": {
																	"v-if": "rec.person_in_production"
																},
																"element": [
																	{
																		"component": "nc-label-input",
																		"text": "Started amount",
																		"attribute": {
																			"id": "started_amount",
																			"model": "rec.current.started_amount",
																			"type": "number",
																			":disabled": "!inputEnabled('started_amount')",
																			"v-on:change": "inputChange('started_amount')",
																			"v-on:blur": "inputBlur('started_amount')",
																			"v-on:focus": "inputFocus('started_amount')",
																			":input-class": "inputClass('started_amount')",
																			"label-style": "width: 7em; text-align: right;"
																		}
																	},
																	{
																		"component": "nc-label-dropdown",
																		"text": "Stop reason",
																		"attribute": {
																			"model": "rec.machine_stop_type",
																			":disabled": "true",
																			"v-on:change": "dropdownChange('machine_stop_type')",
																			"label-style": "width: 7em; text-align: right;"
																		}
																	}
																]
															},
															{
																"component": "nc-row",
																"attribute": {
																	"v-if": "!rec.person_in_production"
																},
																"element": [
																	{
																		"component": "nc-label-dropdown",
																		"text": "Unproductive",
																		"attribute": {
																			"model": "rec.person_state_unproductive",
																			"v-if": "!rec.person_in_production",
																			":disabled": "true",
																			"v-on:change": "dropdownChange('person_state_unproductive')",
																			"label-style": "width: 7em; text-align: right;"
																		}
																	},
																	{
																		"component": "nc-label-dropdown",
																		"text": "Exit reason",
																		"attribute": {
																			"model": "rec.person_exit_reason",
																			":disabled": "true",
																			"v-on:change": "dropdownChange('person_exit_reason')",
																			"label-style": "width: 7em; text-align: right;"
																		}
																	}
																]
															}
														]
													},
													{
														"component": "nc-col",
														"attribute": {
															"width": "3em"
														},
														"element": [
															{
																"component": "nc-row",
																"element": [
																	{
																		"component": "nc-button",
																		"attribute": {
																			"id": "person_in_production-person",
																			"v-on:click": "buttonClick('person','person_in_production')",
																			":class": "buttonClass('person', 'person_in_production')",
																			":style": "{'--button-color': rec.person_in_production > 0 ? 'green' : 'darkred'}",
																			"icon": "user-plus",
																			"class": ["basic", "icon"],
																			"style": "width: 100%;"
																		}
																	}
																]
															},
															{
																"component": "nc-row",
																"element": [
																	{
																		"component": "nc-button",
																		"attribute": {
																			"id": "separate_machine_run",
																			"v-if": "rec.person_in_production",
																			"v-on:click": "buttonClick('machine', 'separate_machine_run')",
																			":disabled": "!buttonEnabled('machine', 'separate_machine_run')",
																			":class": "buttonClass('machine', 'separate_machine_run')",
																			":style": "{'--button-color': rec.separate_machine_run > 0 ? 'green' : 'darkred', 'margin-top': '2px'}",
																			":icon": "buttonIcon('separate_machine_run')",
																			"class": ["basic", "icon"],
																			"style": "width: 100%;"
																		}
																	}
																]
															}
														]
													},
													{
														"component": "nc-col",
														"attribute": {
															"width": "auto"
														},
														"element": [
															{
																"component": "nc-row",
																"element": [
																	{
																		"component": "transition-group",
																		"attribute": {
																			"name": "nc-fade-fast"
																		},
																		"element": [
																			{
																				"component": "nc-button",
																				"attribute": {
																					"id": "person_in_production-start_continue",
																					"v-if": "rec.current.show_start_continue",
																					":text": "buttonText('person', 'start_continue')",
																					"v-on:click": "buttonClick('person', 'start_continue')",
																					"icon": "play",
																					"class": ["positive"],
																					"style": "position: absolute; z-index: 2; transition-property: opacity; transition-duration: 0.3s; opacity: rec.current.show_start_continue ? 1 : 0;"
																				}
																			}
																		]
																	},
																	{
																		"component": "nc-button-group",
																		"attribute": {
																			"v-if": "!rec.person_in_production"
																		},
																		"element": [
																			{
																				"component": "nc-button",
																				"attribute": {
																					":id": "'unproductive_' + button.value",
																					"v-for": "button in arr.unproductive_button_group",
																					"v-on:click": "buttonClick('unproductive', button.value)",
																					":disabled": "!buttonEnabled('unproductive', button.value)",
																					":text": "buttonText('unproductive', button.value)",
																					":class": "buttonClass('unproductive', button.value)",
																					":icon": "buttonIcon('unproductive', button.value)",
																					"class": ["toggle"],
																					":style": "{'--button-color': button.color}"
																				}
																			}
																		]
																	},
																	{
																		"component": "nc-button-group",
																		"attribute": {
																			"v-if": "rec.person_in_production"
																		},
																		"element": [
																			{
																				"component": "nc-button",
																				"attribute": {
																					":id": "'person_' + button.value",
																					"v-for": "button in arr.person_button_group",
																					"v-on:click": "buttonClick('person', button.value)",
																					":disabled": "!buttonEnabled('person', button.value)",
																					":text": "buttonText('person', button.value)",
																					":class": "buttonClass('person', button.value)",
																					":icon": "buttonIcon('person', button.value)",
																					":style": "{'--button-color': button.color}",
																					"class": ["toggle"]
																				}
																			}
																		]
																	}
																]
															},
															{
																"component": "nc-row",
																"element": [
																	{
																		"component": "nc-button-group",
																		"attribute": {
																			"style": "margin-top: 2px"
																		},
																		"element": [
																			{
																				"component": "nc-button",
																				"attribute": {
																					":id": "'machine_' + button.value",
																					"v-if": "rec.person_in_production && rec.separate_machine_run > 0",
																					"v-for": "button in arr.machine_button_group",
																					"v-on:click": "buttonClick('machine', button.value)",
																					":disabled": "!buttonEnabled('machine', button.value)",
																					":text": "buttonText('machine', button.value)",
																					":icon": "buttonIcon('machine', button.value)",
																					":class": "buttonClass('machine', button.value)",
																					":style": "{'--button-color': button.color, 'margin-top': '2px'}",
																					"class": ["toggle"]
																				}
																			}
																		]
																	}
																]
															}
														]
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "13em"
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "Produced",
														"attribute": {
															"id": "produced_amount",
															"model": "rec.current.produced_amount",
															"type": "number",
															":disabled": "!inputEnabled('produced_amount')",
															"v-on:change": "inputChange('produced_amount')",
															"v-on:blur": "inputBlur('produced_amount')",
															"v-on:focus": "inputFocus('produced_amount')",
															":input-class": "inputClass('produced_amount')",
															"label-style": "width: 5em; text-align: right;"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "Failed",
														"attribute": {
															"id": "failed_amount",
															"model": "rec.current.failed_amount",
															"type": "number",
															":disabled": "!inputEnabled('failed_amount')",
															"v-on:change": "inputChange('failed_amount')",
															"v-on:blur": "inputBlur('failed_amount')",
															"v-on:focus": "inputFocus('failed_amount')",
															":input-class": "inputClass('failed_amount')",
															"label-style": "width: 5em; text-align: right;"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "auto"
										},
										"element": [
											{
												"component": "nc-row",
												"attribute": {},
												"element": [
													{
														"component": "nc-button",
														"attribute": {
															"id": "save",
															"model": "hdr.work_center.button.save",
															"v-on:click": "buttonClick('save')",
															":disabled": "!buttonEnabled('save')",
															":class": "buttonClass('save')",
															":text": "buttonText('save')",
															":icon": "buttonIcon('save')",
															"class": ["nc-button-wide"]
														}
													},
													{
														"component": "nc-button",
														"attribute": {
															"id": "primary-button",
															"v-on:click": "update(null, null, true)",
															"class": ["basic", "small", "circular"],
															"style": "padding: 10px; width: 34px !important; min-width: 34px !important;",
															"icon": "sync",
															"model": "hdr.work_center.button.update"
														}
													}
												]
											}
										]
									}
								]
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"id": "work_info"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "84em",
									"class": ["nc-end-h"]
								},
								"element": [
									{
										"component": "nc-label-input",
										"text": "Work info",
										"attribute": {
											"model": "rec.info",
											":readonly": "true",
											"style": "margin-bottom: 1px;",
											"info": "margin-bottom because rec.error_message border: 3px would cause jumping",
											"label-style": "width: 5em;",
											"input-style": "color: blue; opacity: 60%;"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto"
								},
								"element": [
									{
										"component": "nc-label-input",
										"text": "Notes",
										"attribute": {
											"id": "info",
											"model": "rec.current.info",
											"v-on:blur": "inputBlur('info')",
											":disabled": "!inputEnabled('info')",
											"label-style": "width: 4em;"
										}
									}
								]
							},
							{
								"component": "transition-group",
								"attribute": {
									"name": "nc-error-message"
								},
								"element": [
									{
										"component": "nc-col",
										"attribute": {
											"v-if": "rec.error_message",
											":style": "{position: 'absolute', 'z-index': 10, 'transition-duration': '0.3s', transform: rec.person_in_production && rec.separate_machine_run > 0 ? 'translateY(0em)' : 'translateY(-2.9em)', 'margin-left': errorMessagePosition('margin-left', rec.error_message), width: errorMessagePosition('width', rec.error_message)}"
										},
										"element": [
											{
												"component": "nc-input",
												"attribute": {
													"model": "rec.error_message",
													":readonly": "true",
													"style": "background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid crimson; border-radius: 4px;",
													"info": "Floating error message above work info or machine buttons",
													"label-style": "width: 5em;",
													"input-style": "text-align: center; color: crimson; font-weight: bold; background: transparent;"
												}
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"v-if": "rec.warning_message",
											":style": "{position: 'absolute', 'z-index': 9, 'transition-duration': '0.3s', transform: rec.person_in_production && rec.separate_machine_run > 0 ? 'translateY(0em)' : 'translateY(-2.9em)', 'margin-left': errorMessagePosition('margin-left', rec.warning_message), width: errorMessagePosition('width', rec.warning_message)}"
										},
										"element": [
											{
												"component": "nc-input",
												"attribute": {
													"model": "rec.warning_message",
													":readonly": "true",
													"style": "background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.15); border: 2px solid orange; border-radius: 4px;",
													"info": "Floating warning message above work info or machine buttons",
													"label-style": "width: 5em;",
													"input-style": "text-align: center; color: brown; font-weight: bold; background: transparent;"
												}
											}
										]
									}
								]
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"height-": "0.5em",
							"style": "margin-bottom: 2px;"
						},
						"element": [
							{
								"component": "nc-line"
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"id": "find"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "21em",
									"class": ["nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-label-dropdown",
										"text": "Resource",
										"attribute": {
											"label-style": "width: 5em;",
											"model": "rec.resource",
											"v-on:change": "dropdownChange('resource')"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto"
								},
								"element": [
									{
										"component": "nc-col",
										"attribute": {
											"width": "auto",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-label-input",
												"text": "Find",
												"attribute": {
													"label-style": "width: 3em; text-align: right;",
													"model": "rec.find_text",
													"v-on:change": "findChanged(rec.find_text)"
												}
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "2em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-button",
												"attribute": {
													"id": "clear_find",
													"size": "tiny",
													"style": "width: 2em; padding-left: 0.3em",
													"v-on:click": "findChanged(null, 'clear_find')",
													"icon": "backspace"
												}
											}
										]
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto",
									"class": ["nc-space-evenly"]
								},
								"element": [
									{
										"component": "nc-checkbox",
										"text": "Create schedule",
										"attribute": {
											"model": "rec.create_schedule",
											"v-on:click": "update(null, null, true)"
										}
									},
									{
										"component": "nc-checkbox",
										"text": "Show sales",
										"attribute": {
											"model": "rec.virtual_production_order",
											"v-on:click": "refresh()"
										}
									},
									{
										"component": "nc-checkbox",
										"text": "Done",
										"attribute": {
											"model": "rec.show_done",
											"v-on:click": "refresh()"
										}
									},
									{
										"component": "nc-checkbox",
										"text": "Active",
										"attribute": {
											"model": "rec.show_active",
											"v-on:click": "refresh()"
										}
									},
									{
										"component": "nc-checkbox",
										"text": "Incremental",
										"attribute": {
											"model": "rec.incremental_update",
											"v-on:click": "update()"
										}
									},
									{
										"component": "nc-checkbox",
										"text": "Reload",
										"attribute": {
											"model": "rec.reload_data",
											"hdr": "hdr.work_center.reload_data"
										}
									}
								]
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"height": "0.5em",
							"style": "margin-bottom: 0;"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "0.5em",
									"style": "margin-left: -1.25em",
									"v-on:click": "togglePhaseView()"
								},
								"element": [
									{
										"component": "nc-icon",
										"attribute": {
											":icon": "rec.show_phase_view ? 'caret-down' : 'caret-right'",
											"style": "margin-top: 0.2em; cursor: pointer;"
										}
									}
								]
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"v-if": "rec.show_phase_view",
							"style": "margin-bottom: 2px;"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto",
									"height": "6.5em"
								},
								"element": [
									{
										"component": "nc-gantt-chart",
										"attribute": {
											":data": "ganttData",
											"style": "width: 100%;"
										}
									}
								]
							}
						]
					},
					{
						"component": "nc-row",
						"element": [
							{
								"component": "nc-grid",
								"attribute": {
									"id": "work",
									"model": "grid.work",
									":doesExternalFilterPass": "doesExternalFilterPass",
									":isExternalFilterPresent": "isExternalFilterPresent",
									":externalFilterAfter": "externalFilterAfter",
									"v-on:grid-row-clicked": "gridRowClicked",
									"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
									":height": "gridHeight('work')",
									":style": "{width: '100%', 'min-height': '8em'}"
								}
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"v-if": "rec.current.person_state === 'material'",
							"style": "margin-bottom: 8px;"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "14em",
									"class": ["nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-label-input",
										"text": "hdr.work_center.collect.material_need",
										"attribute": {
											"model": "rec.collect.material_need",
											":readonly": "true",
											"label-style": "width: 6em; text-align: right;",
											"info": "Total material needed = started_amount × need per unit"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "14em",
									"class": ["nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-label-input",
										"text": "hdr.work_center.collect.material_collected",
										"attribute": {
											"model": "rec.collect.material_collected",
											":readonly": "true",
											"label-style": "width: 6em; text-align: right;",
											"info": "Total material collected so far"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "14em",
									"class": ["nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-label-input",
										"text": "hdr.work_center.collect.material_remaining",
										"attribute": {
											"model": "rec.collect.material_remaining",
											":readonly": "true",
											"label-style": "width: 6em; text-align: right;",
											"info": "Material still needed to collect"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "15em",
									"class": ["nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-label-input",
										"text": "hdr.work_center.collect.stock_info",
										"attribute": {
											"model": "rec.collect.stock_info",
											":readonly": "true",
											"label-style": "width: 6em; text-align: right;",
											"info": "Selected stock parcel information"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto"
								},
								"element": [
									{
										"component": "nc-label",
										"attribute": {
											"v-html": "rec.collect.material_info",
											"style": "color: #333; font-size: 0.9em;",
											"info": "Material collection summary"
										}
									}
								]
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"v-if": "rec.current.person_state === 'material'",
							"style": "margin-bottom: 8px;"
						},
						"element": [
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto"
								},
								"element": [
									{
										"component": "nc-label",
										"attribute": {
											"v-html": "rec.current.material_info",
											"style": "color: #333; font-size: 0.9em; margin-top: 8px;",
											"info": "Material collection summary"
										}
									}
								]
							},
							{
								"component": "nc-row",
								"attribute": {
									"v-if": "rec.current.person_state === 'material'",
									"style": "margin-bottom: 4px;"
								},
								"element": [
									{
										"component": "nc-col",
										"attribute": {
											"width": "8.5em"
										}
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "12em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-label",
												"text": "Need"
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "20em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-label",
												"text": "Collect"
											}
										]
									}
								]
							},
							{
								"component": "nc-row",
								"attribute": {
									"v-if": "rec.current.person_state === 'material'"
								},
								"element": [
									{
										"component": "nc-col",
										"attribute": {
											"width": "15em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "Stock unit",
														"attribute": {
															"hdr": "rec.collect.stock_unit",
															"model": "rec.collect.collect_amount_1",
															"label-style": "width: 7.5em;",
															"v-on:blur": "updateCollectAmount('collect_amount_1')"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "Design unit",
														"attribute": {
															"hdr": "rec.collect.design_unit",
															"model": "rec.collect.collect_design_amount_1",
															"label-style": "width: 7.5em;",
															"v-on:blur": "updateCollectAmount('collect_design_amount_1')"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "5em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-input",
														"text": "Unit",
														"attribute": {
															"model": "rec.collect.design_unit_1",
															":disabled": "true",
															":horizontal": "true"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-input",
														"text": "Unit",
														"attribute": {
															"model": "rec.collect.design_unit_1",
															":disabled": "true",
															":horizontal": "true"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "7em",
											"class": ["nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-input",
														"attribute": {
															"model": "rec.collect.collect_amount_2",
															":disabled": "false",
															"v-on:blur": "updateCollectAmount('collect_amount_2')"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-input",
														"text": "hdr.work_center.collect.collect_design_amount_2",
														"attribute": {
															"model": "rec.collect.collect_design_amount_2",
															":disabled": "false",
															"v-on:blur": "updateCollectAmount('collect_design_amount_2')"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "5em"
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-input",
														"attribute": {
															"model": "rec.collect.design_unit_2",
															":disabled": "true"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-input",
														"attribute": {
															"model": "rec.collect.design_unit_2",
															":disabled": "true"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "8em",
											"class": ["nc-align-top", "nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-button",
												"attribute": {
													"text": "Collect",
													"icon": "plus",
													"v-on:click": "materialCollect('collect')",
													":disabled": "!buttonEnabled('material', 'collect')",
													"class": ["nc-button-wide"],
													"info": "Collect selected stock parcel for work"
												}
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "8em",
											"class": ["nc-align-top", "nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-button",
												"attribute": {
													"text": "Remove",
													"icon": "minus",
													"v-on:click": "materialCollect('remove')",
													":disabled": "!buttonEnabled('material', 'remove')",
													"class": ["nc-button-wide"],
													"info": "Remove collection from selected stock parcel"
												}
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"width": "8em",
											"class": ["nc-align-top"]
										},
										"element": [
											{
												"component": "nc-button",
												"attribute": {
													"text": "Confirm",
													"icon": "check",
													"v-on:click": "materialCollect('confirm')",
													":disabled": "!buttonEnabled('material', 'confirm')",
													"class": ["nc-button-wide"],
													"info": "Confirm material collection and start work"
												}
											}
										]
									}
								]
							}
						]
					},
					{
						"component": "nc-row",
						"attribute": {
							"v-if": "rec.document_data && rec.document_data.viewer_show_type !== 'fullpage'",
							"class": ["nc-container-margin-top"]
						},
						"element": [
							{
								"component": "nc-row",
								"attribute": {
									"v-if": "false && rec.current.person_state === 'material'",
									"class": ["nc-container-margin-top", "nc-container-margin-bottom"],
									"style": "background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 8px;"
								},
								"element": [
									{
										"component": "nc-label",
										"text": "Product info:",
										"attribute": {
											"style": "font-weight: bold; margin-right: 10px;"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"v-if": "!rec.show_work_phase_wide",
									"width": "auto",
									":style": "{'height': gridHeight('material'), 'min-width': rec.current.person_state === 'material' ? '45%' : '24em'}",
									"class": ["nc-item-margin-top", "nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-row",
										"element": [
											{
												"component": "nc-tab",
												"attribute": {
													"id": "tab_material",
													"model": "rec.tab_material",
													"class": ["nc-tab-work-center"],
													"style": "width: 100%;",
													"v-on:change": "setGrid('product_material')",
													"v-on:dblclick": "setGrid('product_material', true)"
												}
											}
										]
									},
									{
										"component": "nc-row",
										"attribute": {
											"class": ["nc-end-h"],
											"style": "margin-top: -2.2em;"
										},
										"element": [
											{
												"component": "nc-checkbox",
												"text": "Resource materials",
												"attribute": {
													"model": "rec.show_resource_material",
													"v-on:change": "showMaterialPhase()"
												}
											}
										]
									},
									{
										"component": "nc-row",
										"attribute": {
											":style": "{'height': gridHeight('material')}"
										},
										"element": [
											{
												"component": "nc-grid",
												"attribute": {
													"id": "product_material",
													"model": "grid.product_material",
													"v-if": "rec.tab_material === 'material_estimated' || rec.tab_material === 'collect'",
													":isExternalFilterPresent": "isExternalFilterPresent",
													":doesExternalFilterPass": "doesExternalFilterPass",
													"v-on:grid-row-clicked": "gridRowClicked",
													"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
													":height": "gridHeight('product_material')"
												}
											},
											{
												"component": "nc-grid",
												"attribute": {
													"id": "product_material_actual",
													"model": "grid.product_material_actual",
													"v-if": "rec.tab_material === 'material_actual'",
													"v-on:grid-row-clicked": "gridRowClicked",
													"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
													":height": "gridHeight('product_material_actual')"
												}
											}
										]
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto",
									":style": "{'height': gridHeight('material')}",
									"v-if": "rec.tab_material === 'collect'",
									"class": ["nc-item-margin-top", "nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-row",
										"element": [
											{
												"component": "nc-tab",
												"attribute": {
													"id": "product_material",
													"class": ["nc-tab-work-center"],
													"style": "width: 100%;",
													"model": "rec.tab_collect",
													"v-on:change": "setGrid('product_material')",
													"v-on:dblclick": "setGrid('product_material', true)"
												}
											}
										]
									},
									{
										"component": "nc-grid",
										"attribute": {
											"v-if": "rec.tab_collect === 'collect'",
											"id": "stock_location",
											"model": "grid.stock_location",
											":isExternalFilterPresent": "false",
											":height": "gridHeight('material')"
										}
									},
									{
										"component": "nc-grid",
										"attribute": {
											"v-if": "rec.tab_collect === 'order_row_purchase'",
											"id": "order_row_purchase",
											"model": "grid.order_row_purchase",
											":isExternalFilterPresent": "false",
											":height": "gridHeight('material')"
										}
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto",
									":style": "{'height': gridHeight('material'), 'min-width': '24em'}",
									"v-if": "!rec.show_work_phase_wide",
									"class": ["nc-item-margin-top", "nc-margin-right"]
								},
								"element": [
									{
										"component": "nc-row",
										"element": [
											{
												"component": "nc-tab",
												"attribute": {
													"id": "tab_document",
													"class": ["nc-tab-work-center"],
													"style": "width: 100%;",
													"model": "rec.tab_document",
													"v-on:change": "openDocumentPreview()"
												}
											}
										]
									},
									{
										"component": "nc-row",
										"attribute": {
											":height": "rec.current.person_state === 'material' ? 'calc(50vh + 4px)' : 'calc(22em + 4px)'"
										},
										"element": [
											{
												"component": "nc-droparea",
												"attribute": {
													":clickable": "false",
													"v-if": "rec.tab_document !== 'stock_map'",
													"v-on:import-file": "importFile"
												},
												"element": [
													{
														"component": "nc-grid",
														"attribute": {
															"id": "document",
															"model": "grid.document",
															"v-on:grid-row-clicked": "gridRowClicked",
															"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
															":style": "{width: '100%', 'margin-top': '0px', 'padding-bottom': '1px', height: gridHeight('material')}"
														}
													}
												]
											},
											{
												"component": "nc-rect",
												"attribute": {
													"v-if": "rec.tab_document === 'stock_map'",
													"style": ["margin: 1px; overflow: hidden;"]
												},
												"element": [
													{
														"component": "nc-svg-map",
														"attribute": {
															":highlight": "mapSelected",
															"style": "padding-top: 2px; padding-bottom: 2px;",
															"svg": "img/stock-map.svg",
															"v-model:hover": "mapHover",
															"v-on:click": "stockMapToggleSelected($event)",
															"v-on:dblclick": "stockMapDoubleClick($event)"
														}
													},
													{
														"component": "nc-image",
														"attribute": {
															"v-if": "false",
															"src": "img/stock-map.png"
														}
													}
												]
											}
										]
									}
								]
							},
							{
								"component": "nc-col",
								"attribute": {
									"width": "auto",
									":style": "{'height': gridHeight('material'), 'min-width': '35em'}",
									"class": ["nc-item-margin-top"],
									"v-if": "rec.tab_material !== 'collect'"
								},
								"element": [
									{
										"component": "nc-row",
										"element": [
											{
												"component": "nc-tab",
												"attribute": {
													"id": "tab_work_phase",
													"class": ["nc-tab-work-center"],
													"style": "width: 100%",
													"model": "rec.tab_work_phase",
													"v-on:change": "setGrid('work_phase')",
													"v-on:dblclick": "setGrid('work_phase', true)"
												}
											}
										]
									},
									{
										"component": "nc-row",
										"attribute": {
											"class": ["nc-end-h"],
											"style": "margin-top: -2.2em;"
										},
										"element": [
											{
												"component": "nc-checkbox",
												"text": "Wide",
												"attribute": {
													"model": "rec.show_work_phase_wide"
												}
											}
										]
									},
									{
										"component": "nc-row",
										"element": [
											{
												"component": "nc-grid",
												"attribute": {
													"id": "work_phase",
													"model": "grid.work_phase",
													"v-if": "rec.tab_work_phase === 'work_phase_estimated'",
													"v-on:grid-row-clicked": "gridRowClicked",
													"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
													":height": "gridHeight('work_phase')",
													"style": ["width: 100%"]
												}
											},
											{
												"component": "nc-grid",
												"attribute": {
													"id": "work_phase_actual",
													"model": "grid.work_phase_actual",
													"v-if": "rec.tab_work_phase === 'work_phase_actual'",
													"v-on:grid-row-clicked": "gridRowClicked",
													"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
													":height": "gridHeight('work_phase_actual')",
													"style": ["width: 100%"]
												}
											},
											{
												"component": "nc-grid",
												"attribute": {
													"id": "work_phase_actual_open",
													":height": "gridHeight('work_phase_actual_open')",
													"model": "grid.work_phase_actual_open",
													"v-if": "rec.tab_work_phase === 'work_phase_actual_open'",
													"v-on:grid-row-clicked": "gridRowClicked",
													"v-on:grid-row-double-clicked": "gridRowDoubleClicked",
													"style": ["width: 100%"]
												}
											},
											{
												"component": "nc-rect",
												"attribute": {
													"v-if": "rec.tab_work_phase === 'document'",
													":style": "{'height': gridHeight('material'), 'margin': '1px', 'overflow': 'hidden'}"
												},
												"element": [
													{
														"component": "nc-document-preview",
														"attribute": {
															"id": "nc-document-preview-canvas",
															":name": "rec.document_name",
															":loadable": "rec.document_loadable",
															":passwordCallback": "passwordCallback",
															":src": "rec.document_data",
															":viewStyle": "rec.document_style_preview",
															"v-on:dblclick": "documentPreviewDoubleClick"
														}
													}
												]
											}
										]
									}
								]
							}
						]
					}
				]
			}
		]
	}
}
