<mvc:View displayBlock="true" controllerName="sap.f.ShellBarWithFlexibleColumnLayout.controller.Master" height="100%"
	  xmlns="sap.m"
	  xmlns:f="sap.f"
	  xmlns:mvc="sap.ui.core.mvc">
	<f:DynamicPage id="dynamicPageId"
				   toggleHeaderOnTitleClick="false">
		<!-- DynamicPage Title -->
		<f:title>
			<f:DynamicPageTitle>
				<f:heading>
					<Title text="Products ({products>/ProductCollectionStats/Counts/Total})"/>
				</f:heading>
			</f:DynamicPageTitle>
		</f:title>

		<!-- DynamicPage Content -->
		<f:content>
			<Table
				id="productsTable"
				mode="SingleSelectMaster"
				itemPress="onListItemPress"
				inset="false"
				items="{
					path: 'products>/ProductCollection',
					sorter: {
						path: 'Name'
					}
				}"
				class="sapFDynamicPageAlignContent"
				width="auto">
				<headerToolbar>
					<OverflowToolbar>
						<ToolbarSpacer/>
						<SearchField search="onSearch" width="17.5rem"/>
						<OverflowToolbarButton icon="sap-icon://add" type="Transparent" press="onAdd"/>
						<OverflowToolbarButton icon="sap-icon://sort" type="Transparent" press="onSort"/>
					</OverflowToolbar>
				</headerToolbar>
				<columns>
					<Column width="12em">
						<Text text="Product" />
					</Column>
					<Column	hAlign="End">
						<Text text="Price" />
					</Column>
				</columns>
				<items>
					<ColumnListItem type="Navigation">
						<cells>
							<ObjectIdentifier title="{products>Name}" text="{products>ProductId}" />
							<ObjectNumber
									number="{
										parts:[{path:'products>Price'},{path:'products>CurrencyCode'}],
										type: 'sap.ui.model.type.Currency',
										formatOptions: {showMeasure: false}
									}"
									unit="{products>CurrencyCode}" />
						</cells>
					</ColumnListItem>
				</items>
			</Table>
		</f:content>

		<!-- DynamicPage Footer -->
		<f:footer>
			<OverflowToolbar>
				<ToolbarSpacer/>
				<Button type="Accept" text="Accept"/>
				<Button type="Reject" text="Reject"/>
			</OverflowToolbar>
		</f:footer>
	</f:DynamicPage>
</mvc:View>