<?page title="${labels.AgendaSuppliers}" contentType="text/html;charset=UTF-8"?>
<zk>
	<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
	<window border="normal" apply="org.zkoss.bind.BindComposer" vflex="1" viewModel="@id('vm') @init('info.bukova.isspst.ui.addressbook.AddressList')">
		<caption zclass="form-caption" label="${labels.AgendaSuppliers}" />
		<include src="/app/toolbar.zul" />

		<hbox width="100%" vflex="1">
			<listbox id="dataGrid" 
				model="@load(vm.dataList)" 
				selectedItem="@bind(vm.dataBean)" 
				onAfterRender="@command('afterRender')" 
				selectedIndex="@load(vm.selIndex)" 
				hflex="6" 
				vflex="1">
				<listhead vflex="true" menupopup="auto">
					<listheader label="${labels.SuppliersGridColumnCompany}" sort="czech(company)" />
					<listheader label="${labels.SuppliersGridColumnIC}" sort="auto(ic)" width="100px" />
					<listheader label="${labels.SuppliersGridColumnContact}" sort="czech(contactName)" />
					<listheader label="${labels.SuppliersGridColumnStreet}" sort="czech(street)" />
					<listheader label="${labels.SuppliersGridColumnNo}" sort="czech(houseNumber)" width="80px" />
					<listheader label="${labels.SuppliersGridColumnCity}" sort="czech(city)" />
				</listhead>

				<auxhead sclass="category-center" visible="@load(vm.filter)">
					<auxheader>
						<div sclass="find-grid-cell">
							<div sclass="find-grid-divtextbox">
								<textbox value="@bind(vm.filterTemplate.company)" instant="true" onChange="@command('doFilter')" 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.filterTemplate.ic)" instant="true" onChange="@command('doFilter')" 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.filterTemplate.contactName)" instant="true" onChange="@command('doFilter')" 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.filterTemplate.street)" instant="true" onChange="@command('doFilter')" 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.filterTemplate.houseNumber)" instant="true" onChange="@command('doFilter')" 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.filterTemplate.city)" instant="true" onChange="@command('doFilter')" 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.company)" />
						<listcell label="@load(each.ic)" />
						<listcell label="@load(each.contactName)" />
						<listcell label="@load(each.street)" />
						<listcell label="@load(each.houseNumber)" />
						<listcell label="@load(each.city)" />
					</listitem>
				</template>
			</listbox>

			<div hflex="4">
				<label value="${labels.SuppliersGridColumnDetail}:" sclass="bold" />
				<grid visible="@load(vm.dataBean ne null)" hflex="1">
					<columns>
						<column hflex="min" />
						<column />
					</columns>
					<rows>
						<row>
							<label value="${labels.SuppliersGridColumnDepartment}" />
							<label value="@load(vm.dataBean.department)" />
						</row>
						<row>
							<label value="${labels.SuppliersGridColumnPhone}" />
							<label value="@load(vm.dataBean.phone)" />
						</row>
						<row>
							<label value="${labels.SuppliersGridColumnEmail}" />
							<label value="@load(vm.dataBean.email)" />
						</row>
						<row>
							<label value="${labels.SuppliersGridColumnWWW}" />
							<label value="@load(vm.dataBean.web)" />
						</row>
					</rows>
				</grid>
				<label value="${labels.SuppliersGridColumnNote}:" visible="@load(not empty vm.dataBean.description)" sclass="bold" />
				<html style="font-family:arial,sans-serif;font-size:12px;" content="@load(vm.dataBean.description)" />
				<mapa address="@load((empty vm.dataBean.street ? vm.dataBean.city : vm.dataBean.street).concat(' ').concat(vm.dataBean.houseNumber).concat(', ').concat(vm.dataBean.city))" width="100%" height="300px" visible="@load(vm.dataBean ne null)" />
			</div>
		</hbox>
	</window>
</zk>