<mvc:View
	controllerName="mycompany.myapp.MyWorklistApp.controller.Worklist"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:semantic="sap.f.semantic">

	<semantic:SemanticPage
		id="page"
		headerPinnable="false"
		toggleHeaderOnTitleClick="false">

		<semantic:titleHeading>
			<Title text="{i18n>worklistTitle}" />
		</semantic:titleHeading>

		<semantic:headerContent>
			<IconTabBar
				id="iconTabBar"
				select=".onQuickFilter"
				expandable="false">
				<items>
					<IconTabFilter
						key="all"
						showAll="true"
						count="{worklistView>/countAll}"
						text="{i18n>WorklistFilterProductsAll}"/>
					<IconTabSeparator/>
					<IconTabFilter
						key="inStock"
						icon="sap-icon://message-success"
						iconColor="Positive"
						count="{worklistView>/inStock}"
						text="{i18n>WorklistFilterInStock}"/>
					<IconTabFilter
						key="shortage"
						icon="sap-icon://message-warning"
						iconColor="Critical"
						count="{worklistView>/shortage}"
						text="{i18n>WorklistFilterShortage}"/>
					<IconTabFilter
						key="outOfStock"
						icon="sap-icon://message-error"
						iconColor="Negative"
						count="{worklistView>/outOfStock}"
						text="{i18n>WorklistFilterOutOfStock}"/>
				</items>
				<content>
					<Table
						id="table"
						busyIndicatorDelay="{worklistView>/tableBusyDelay}"
						growing="true"
						growingScrollToLoad="true"
						noDataText="{worklistView>/tableNoDataText}"
						updateFinished=".onUpdateFinished"
						width="auto"
						items="{
							path: '/Products',
							sorter: {
								path: 'ProductName',
								descending: false
							},
							parameters: {
								'expand': 'Supplier'
							}
						}">
					<headerToolbar>
						<Toolbar>
							<Title
								id="tableHeader"
								text="{worklistView>/worklistTableTitle}"/>
							<ToolbarSpacer/>
							<SearchField
								id="searchField"
								tooltip="{i18n>worklistSearchTooltip}"
								search=".onSearch"
								width="auto">
							</SearchField>
						</Toolbar>
					</headerToolbar>

						<columns>
							<Column id="nameColumn">
								<Text
									id="nameColumnTitle"
									text="{i18n>TableNameColumnTitle}"/>
							</Column>
							<Column
								id="supplierNameColumn"
								demandPopin="false"
								minScreenWidth="Tablet">
								<Text text="{i18n>TableSupplierColumnTitle}"/>
							</Column>
							<Column
								id="unitPriceColumn"
								hAlign="End"
								demandPopin="true"
								minScreenWidth="Tablet">
								<Text text="{i18n>TablePriceColumnTitle}"/>
							</Column>
							<Column id="unitsOnOrderColumn"
								demandPopin="true"
								minScreenWidth="Tablet"
								hAlign="End">
								<Text text="{i18n>TableUnitsOrderedColumnTitle}"/>
							</Column>
							<Column
								id="unitsInStockColumn"
								hAlign="End">
								<Text text="{i18n>TableUnitsInStockColumnTitle}"/>
							</Column>
						</columns>
					<items>
						<ColumnListItem
							type="Navigation"
							press=".onPress">
							<cells>
								<ObjectIdentifier
									title="{ProductName}"/>
								<Text text = "{Supplier/CompanyName}"/>
								<ObjectNumber
									unit="EUR"
									number="{
										path: 'UnitPrice',
										formatter: '.formatter.numberUnit'}"/>
								<ObjectNumber
									number="{
										path: 'UnitsOnOrder',
										formatter: '.formatter.numberUnit'}"
										unit="PC"/>
								<ObjectNumber
									number="{
										path: 'UnitsInStock',
										formatter: '.formatter.numberUnit'}"
									unit="PC"
									state="{
										path: 'UnitsInStock',
										formatter: '.formatter.quantityState'}"/>
								</cells>
							</ColumnListItem>
						</items>
					</Table>
				</content>
			</IconTabBar>
		</semantic:headerContent>
		<semantic:sendEmailAction>
			<semantic:SendEmailAction id="shareEmail" press=".onShareEmailPress"/>
		</semantic:sendEmailAction>
	</semantic:SemanticPage>
</mvc:View>