<mvc:View
	controllerName="sap.ui.demo.walkthrough.controller.InvoiceList"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core">
	<Panel accessibleRole="Region">
		<headerToolbar>
			<Toolbar>
				<Title text="{i18n>invoiceListTitle}"/>
				<ToolbarSpacer/>
				<SearchField
					width="50%"
					search=".onFilterInvoices"/>
			</Toolbar>
		</headerToolbar>
		<Table
			id="invoiceList"
			class="sapUiResponsiveMargin"
			width="auto"
			items="{
				path : 'invoice>/Invoices',
				sorter : {
					path : 'ShipperName',
					group : true
				}
			}">
			<columns>
				<Column
					hAlign="End"
					minScreenWidth="Small"
					demandPopin="true"
					width="4em">
					<Text text="{i18n>columnQuantity}"/>
				</Column>
				<Column>
					<Text text="{i18n>columnName}"/>
				</Column>
				<Column
					minScreenWidth="Small"
					demandPopin="true">
					<Text text="{i18n>columnStatus}"/>
				</Column>
				<Column
					minScreenWidth="Tablet"
					demandPopin="false">
					<Text text="{i18n>columnSupplier}"/>
				</Column>
				<Column
					hAlign="End">
					<Text text="{i18n>columnPrice}"/>
				</Column>
			</columns>
			<items>
				<ColumnListItem
					type="Navigation"
					press=".onPress">
					<cells>
						<ObjectNumber number="{invoice>Quantity}" emphasized="false"/>
						<ObjectIdentifier title="{invoice>ProductName}"/>
						<Text text="{
							path: 'invoice>Status',
							formatter: '.formatter.statusText'
						}"/>
						<Text text="{invoice>ShipperName}"/>
						<ObjectNumber
							number="{
								parts: [{path: 'invoice>ExtendedPrice'}, {path: 'view>/currency'}],
								type: 'sap.ui.model.type.Currency',
								formatOptions: {
									showMeasure: false
								}
							}"
							unit="{view>/currency}"
							state="{= ${invoice>ExtendedPrice} > 50 ? 'Error' : 'Success' }"/>
					</cells>
				</ColumnListItem>
			</items>
		</Table>
	</Panel>
</mvc:View>
