<?page title="${labels.AddItem}" contentType="text/html;charset=UTF-8"?>
<zk>
	<window
		id="selectItemsWnd"
		closable="true"
		border="normal"
		position="center"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('info.bukova.isspst.ui.main.orders.requirements.SelectItems')">
		<caption
			src="/img/item-add.png"
			zclass="form-caption"
			label="${labels.AddItem}" />
		<vlayout>
			<tabbox
				id="tabboxItems"
				hflex="1">
				<tabs>
					<tab
						id="tabMaterial"
						label="${labels.AgendaMaterial}"
						image="/img/palet-032.png" />
					<tab
						id="tabService"
						label="${labels.AgendaServices}"
						image="/img/painting-032.png" />
				</tabs>
				<tabpanels>
					<tabpanel>
						<toolbar>
							<toolbarbutton
								image="/img/funnel.png"
								tooltiptext="${labels.ToolbarRecFilter}"
								id="btnFilterMaterial"
								onClick="@command('onFilterMaterial')" />
						</toolbar>
						<listbox
							model="@load(vm.materialList)"
							selectedItem="@bind(vm.selectedItem)">
							<listhead menupopup="auto">
								<listheader
									label="${labels.code}"
									sort="czech(code)"
									width="10%" />
								<listheader
									label="${labels.name}"
									sort="czech(name)"
									width="25%" />
								<listheader
									label="${labels.munit}"
									width="15%" />
								<listheader
									label="${labels.description}"
									sort="czech(description)"
									width="50%" />
							</listhead>
							<auxhead
								sclass="category-center"
								visible="@load(vm.activeFilterMaterial)">
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<textbox
												value="@bind(vm.filterTmpMaterial.code)"
												instant="true"
												onChange="@command('doFilterMaterial')"
												maxlength="@load(vm.lengthText)"
												sclass="find-grid-textbox" />
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<textbox
												value="@bind(vm.filterTmpMaterial.name)"
												instant="true"
												onChange="@command('doFilterMaterial')"
												maxlength="@load(vm.lengthText)"
												sclass="find-grid-textbox" />
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<combobox
												instant="true"
												model="@load(vm.munitList)"
												selectedItem="@bind(vm.filterTmpMaterial.munit)"
												onChange="@command('doFilterMaterial')"
												readonly="true"
												sclass="find-grid-textbox">
												<template name="model">
													<comboitem label="@load(each.name)" />
												</template>
											</combobox>
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<textbox
												value="@bind(vm.filterTmpMaterial.description)"
												instant="true"
												onChange="@command('doFilterMaterial')"
												maxlength="@load(vm.lengthDescription)"
												sclass="find-grid-textbox" />
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
							</auxhead>
							<template name="model">
								<listitem>
									<listcell label="@load(each.code)" />
									<listcell label="@load(each.name)" />
									<listcell label="@load(each.munit.name)" />
									<listcell label="@load(each.description)" />
								</listitem>
							</template>
						</listbox>
					</tabpanel>
					<tabpanel>
						<toolbar>
							<toolbarbutton
								image="/img/funnel.png"
								tooltiptext="${labels.ToolbarRecFilter}"
								id="btnFilterService"
								onClick="@command('onFilterService')" />
						</toolbar>
						<listbox
							model="@load(vm.serviceItemList)"
							selectedItem="@bind(vm.selectedItem)">
							<listhead menupopup="auto">
								<listheader
									label="${labels.code}"
									sort="czech(code)"
									width="10%" />
								<listheader
									label="${labels.name}"
									sort="czech(name)"
									width="30%" />
								<listheader
									label="${labels.description}"
									sort="czech(description)"
									width="60%" />
							</listhead>
							<auxhead
								sclass="category-center"
								visible="@load(vm.activeFilterService)">
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<textbox
												value="@bind(vm.filterTmpService.code)"
												instant="true"
												onChange="@command('doFilterService')"
												maxlength="@load(vm.lengthText)"
												sclass="find-grid-textbox" />
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<textbox
												value="@bind(vm.filterTmpService.name)"
												instant="true"
												onChange="@command('doFilterService')"
												maxlength="@load(vm.lengthText)"
												sclass="find-grid-textbox" />
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
								<auxheader>
									<div sclass="find-grid-cell">
										<div sclass="find-grid-divtextbox">
											<textbox
												value="@bind(vm.filterTmpService.description)"
												instant="true"
												onChange="@command('doFilterService')"
												maxlength="@load(vm.lengthDescription)"
												sclass="find-grid-textbox" />
										</div>
										<div sclass="find-grid-img">
											<image src="/img/funnel.png" />
										</div>
									</div>
								</auxheader>
							</auxhead>
							<template name="model">
								<listitem>
									<listcell label="@load(each.code)" />
									<listcell label="@load(each.name)" />
									<listcell label="@load(each.description)" />
								</listitem>
							</template>
						</listbox>
					</tabpanel>
				</tabpanels>
			</tabbox>
		</vlayout>
		<vlayout>
			<div
				hflex="max"
				align="right">
				<button
					image="~./zul/img/misc/drag-disallow.png"
					label="${labels.ButtonStorno}"
					onClick="selectItemsWnd.detach()"
					sclass="nicebutton" />
				<button
					image="/img/item-add.png"
					label="${labels.AddItem}"
					onClick="@global-command('insertSelectedItem', selected=vm.selectedItem, window=selectItemsWnd)"
					disabled="@load(empty vm.selectedItem ? 'true' : 'false')"
					sclass="nicebutton" />
			</div>
		</vlayout>
	</window>
</zk>