<mvc:View
		xmlns:c="sap.ui.core"
		controllerName="sap.f.sample.DynamicPageAnalyticalTable.controller.DynamicPageAnalyticalTable"
		xmlns:mvc="sap.ui.core.mvc"
		xmlns:u="sap.ui.unified"
		xmlns="sap.m"
		xmlns:t="sap.ui.table"
		xmlns:f="sap.f"
		xmlns:layout="sap.ui.layout"
		height="100%">
		<f:DynamicPage id="dynamicPageId" preserveHeaderStateOnScroll="true" headerExpanded="{/headerExpanded}">
			<!-- DynamicPage Title -->
			<f:title>
				<f:DynamicPageTitle>
					<f:heading>
						<Title text="Header Title"/>
					</f:heading>
					<f:expandedContent>
						<Label text="This is a subheading"/>
					</f:expandedContent>
					<f:snappedContent>
						<Label text="This is a subheading"/>
					</f:snappedContent>
					<f:snappedTitleOnMobile>
						<Title text="This is a subheading"/>
					</f:snappedTitleOnMobile>
					<f:content>
						<OverflowToolbar>
							<GenericTag text="SR"
								status="Error"
								press="onGenericTagPress"
								design="StatusIconHidden">
								<ObjectNumber number="2"
									unit="M"
									emphasized="false"
									state="Error"/>
							</GenericTag>
						</OverflowToolbar>
					</f:content>
					<f:actions>
						<ToolbarSpacer/>
						<Button
								text="Edit"
								type="Emphasized"/>
						<Button
								text="Delete"
								type="Transparent"/>
						<Button
								text="Copy"
								type="Transparent"/>
						<Button
								icon="sap-icon://action"
								type="Transparent"/>
					</f:actions>
				</f:DynamicPageTitle>
			</f:title>

			<!-- DynamicPage Header -->
			<f:header>
				<f:DynamicPageHeader pinnable="true">
						<FlexBox
								alignItems="Start"
								justifyContent="SpaceBetween">
							<items>
								<Panel
										backgroundDesign="Transparent"
										class="sapUiNoContentPadding">
									<content>
										<layout:HorizontalLayout
												allowWrapping="true">
											<layout:VerticalLayout
													class="sapUiMediumMarginEnd">
												<ObjectAttribute title="Location" text="Warehouse A"/>
												<ObjectAttribute title="Halway" text="23L"/>
												<ObjectAttribute title="Rack" text="34"/>
											</layout:VerticalLayout>
											<layout:VerticalLayout>
												<ObjectAttribute title="Availability"/>
												<ObjectStatus text="In Stock" state="Success" />
											</layout:VerticalLayout>
										</layout:HorizontalLayout>
									</content>
								</Panel>
							</items>
						</FlexBox>
				</f:DynamicPageHeader>
			</f:header>

			<f:content>
				<t:Table
						rows="{/ProductCollection}"
						selectionMode="MultiToggle">
					<t:extension>
						<OverflowToolbar style="Clear">
							<Title text="Products"/>
						</OverflowToolbar>
					</t:extension>
					<t:columns>
						<t:Column width="11rem">
							<Label text="Product Name" />
							<t:template>
								<Text text="{Name}" wrapping="false" />
							</t:template>
						</t:Column>
						<t:Column width="11rem">
							<Label text="Product Id" />
							<t:template>
								<Input value="{ProductId}"/>
							</t:template>
						</t:Column>
						<t:Column width="6rem" hAlign="End">
							<Label text="Quantity" />
							<t:template>
								<Label text="{Quantity}" />
							</t:template>
						</t:Column>
						<t:Column width="9rem">
							<Label text="Status" />
							<t:template>
								<ObjectStatus text="{Status}" state="{
								path: 'Available',
								formatter: '.formatAvailableToObjectState'
							}"/>
							</t:template>
						</t:Column>
						<t:Column width="9rem">
							<Label text="Price" />
							<t:template>
								<u:Currency value="{Price}" currency="{CurrencyCode}"/>
							</t:template>
						</t:Column>
						<t:Column width="12rem">
							<Label text="Supplier" />
							<t:template>
								<ComboBox value="{SupplierName}" items="{/Suppliers}">
									<c:Item text="{Name}"/>
								</ComboBox>
							</t:template>
						</t:Column>
						<t:Column width="9rem">
							<Label text="Image" />
							<t:template>
								<Link text="Show Image" href="{ProductPicUrl}" target="_blank"/>
							</t:template>
						</t:Column>
						<t:Column width="9rem">
							<Label text="Details" />
							<t:template>
								<Button text="Show Details" press="handleDetailsPress"/>
							</t:template>
						</t:Column>
						<t:Column width="7rem">
							<Label text="Heavy Weight" />
							<t:template>
								<CheckBox selected="{
								path: 'Heavy',
								type: 'sap.ui.model.type.String'
							}"/>
							</t:template>
						</t:Column>
						<t:Column width="12rem">
							<Label text="Category" />
							<t:template>
								<Select selectedKey="{Category}" items="{/Categories}">
									<c:Item text="{Name}" key="{Name}"/>
								</Select>
							</t:template>
						</t:Column>
						<t:Column width="6rem" hAlign="Center">
							<Label text="Status" />
							<t:template>
								<c:Icon src="{
								path: 'Available',
								formatter: '.formatAvailableToIcon'
							}"/>
							</t:template>
						</t:Column>
						<t:Column width="11rem" hAlign="Center">
							<Label text="Delivery Date" />
							<t:template>
								<DatePicker value="{
								path: 'DeliveryDate',
								type: 'sap.ui.model.type.Date',
								formatOptions: {source: {pattern: 'timestamp'}}
							}"/>
							</t:template>
						</t:Column>
					</t:columns>
				</t:Table>
			</f:content>
			<!-- DynamicPage Footer -->
			<f:footer>
				<OverflowToolbar>
					<Button icon="sap-icon://message-popup"
							text="{/messagesLength}"
							type="Emphasized"
							press="onMessageButtonPress"
							visible="{= !!${/messagesLength}}"/>
					<ToolbarSpacer/>
					<Button type="Accept" text="Accept"/>
					<Button type="Reject" text="Reject"/>
				</OverflowToolbar>
			</f:footer>
		</f:DynamicPage>
</mvc:View>