{
	"name": "form/nc/nc-bank/nc-bank.json",
	"layout": {
		"component": "nc-form",
		"attribute": {
			"id": "nc-bank"
		},
		"element": [
			{
				"component": "nc-row",
				"attribute": {
					"class": ["nc-no-print"]
				},
				"element": [
					{
						"component": "nc-col",
						"attribute": {
							"class": ["nc-margin-right"]
						},
						"element": [
							{
								"component": "nc-label-input",
								"text": "Start Date",
								"attribute": {
									"model": "rec.start_date",
									":horizontal": "true"
								}
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"class": ["nc-margin-right"]
						},
						"element": [
							{
								"component": "nc-label-input",
								"text": "End date",
								"attribute": {
									"model": "rec.end_date",
									":horizontal": "true"
								}
							}
						]
					},
					{
						"component": "nc-col",
						"attribute": {
							"width": "auto"
						},
						"element": [
							{
								"component": "nc-button",
								"attribute": {
									"model": "hdr.nc_bank.load",
									"v-on:click": "loadData()"
								},
								"element": [
									{
										"component": "nc-translate",
										"text": "Load",
										"attribute": {
											"model": "hdr.nc_bank.load"
										}
									}
								]
							}
						]
					}
				]
			},
			{
				"component": "nc-row",
				"attribute": {
					"height": "1em"
				},
				"element": [
					{
						"component": "nc-divider"
					}
				]
			},
			{
				"component": "nc-row",
				"attribute": {
					"class": ["nc-align-top"]
				},
				"element": [
					{
						"component": "nc-tab",
						"attribute": {
							"model": "rec.table",
							"v-on:change": "changeTab()"
						},
						"element": [
							{
								"component": "nc-row",
								"attribute": {
									"v-if": "rec.table === 'bank_statement_print'",
									"class": ["nc-align-top"]
								},
								"element": [
									{
										"component": "nc-bank-note",
										"attribute": {
											":scrollbar": "false",
											":data": "rec.bank_note_array"
										}
									}
								]
							},
							{
								"component": "nc-row",
								"attribute": {
									"v-else": ""
								},
								"comment": ":class = {active: nc.equals(item, rec.table)}",
								"element": [
									{
										"component": "nc-col",
										"attribute": {
											":width": "rec.table === 'bank_statement' ? 'calc(100vw - 96em)' : 'auto'",
											"class": ["nc-align-top", "nc-margin-right"]
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label",
														"attribute": {
															"hdr": "hdr.nc_bank.bank_statement"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-grid",
														"attribute": {
															"id": "bank_statement",
															"height": "22vh",
															"model": "grid.bank_statement",
															"style": "min-width: 10em;",
															"v-on:grid-row-clicked": "gridRowClicked"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label",
														"attribute": {
															":hdr": "rec.table === 'bank_statement' ? 'hdr.nc_bank.voucher_row' : 'hdr.nc_bank.voucher'"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-grid",
														"attribute": {
															"id": "voucher",
															"height": "16vh",
															"model": "grid.voucher",
															"style": "min-width: 10em;",
															"v-on:grid-row-clicked": "gridRowClicked"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label",
														"attribute": {
															"hdr": "hdr.nc_bank.bank_payment"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-grid",
														"attribute": {
															"id": "bank_payment",
															"height": "16vh",
															"model": "grid.bank_payment",
															"style": "min-width: 10em;",
															"v-on:grid-row-clicked": "gridRowClicked"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label",
														"text": "Json data",
														"attribute": {
															"hdr": "hdr.nc_bank.json_data"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"attribute": {
													"height": "22vh"
												},
												"element": [
													{
														"component": "nc-code-editor",
														"attribute": {
															":code": "jsonTextData",
															":line-numbers": "true",
															"language": "json"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"class": ["nc-align-top"],
											"v-if": "rec.table === 'bank_statement'",
											"width": "auto"
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-col",
														"attribute": {
															"width": "auto"
														},
														"element": [
															{
																"component": "nc-label",
																"text": "Bank note",
																"attribute": {
																	"hdr": "hdr.nc_bank.bank_note"
																}
															}
														]
													},
													{
														"component": "nc-col",
														"attribute": {
															"width": "auto",
															"class": ["nc-end-h"]
														},
														"element": [
															{
																"component": "nc-span",
																"text": "draw rows: {{ rec.list_info }}, {{rec.bank_note_array.length}} rows loaded"
															}
														]
													}
												]
											},
											{
												"component": "nc-row",
												"attribute": {
													"style": "overflow: hide; border: 1px solid silver;",
													"class": ["nc-align-top"]
												},
												"element": [
													{
														"component": "nc-bank-note",
														"attribute": {
															"height": "calc(100vh - 15.5em)",
															":data": "rec.bank_note_array"
														}
													}
												]
											}
										]
									},
									{
										"component": "nc-col",
										"attribute": {
											"class": ["nc-align-top"],
											"v-if": "rec.table === 'bookkeeping_voucher'",
											"width": "auto"
										},
										"element": [
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "Name",
														"attribute": {
															"model": "rec.bkv.reference"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "Start date",
														"attribute": {
															"model": "rec.bkv.start_date"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label-input",
														"text": "End date",
														"attribute": {
															"model": "rec.bkv.end_date"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"element": [
													{
														"component": "nc-label",
														"attribute": {
															"hdr": "hdr.nc_bank.json_data"
														}
													}
												]
											},
											{
												"component": "nc-row",
												"attribute": {
													"height": "20vh"
												},
												"element": [
													{
														"component": "nc-code-editor",
														"attribute": {
															":code": "rec.bkv.json_data",
															":line-numbers": "true",
															"language": "json"
														}
													}
												]
											}
										]
									}
								]
							}
						]
					}
				]
			}
		]
	}
}
