<mvc:View
	controllerName="sap.ui.demo.cart.controller.Product"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Page
		id="page"
		backgroundDesign="Solid">
		<landmarkInfo>
			<PageAccessibleLandmarkInfo
				rootRole="Region"
				rootLabel="{i18n>Product_rootLabel}"
				contentRole="Main"
				contentLabel="{i18n>Product_contentLabel}"
				headerRole="Region"
				headerLabel="{i18n>Product_headerLabel}"
				footerRole="Region"
				footerLabel="{i18n>Product_footerLabel}"/>
		</landmarkInfo>
		<customHeader>
			<Bar>
				<contentLeft>
					<Button
						type="Back"
						visible="{appView>/smallScreenMode}"
						press=".onBack"/>
				</contentLeft>
				<contentMiddle>
					<Title
						level="H2"
						text="{Name}"/>
				</contentMiddle>
				<contentRight>
					<Button
						icon="sap-icon://customer"
						press=".onAvatarPress"
						tooltip="{i18n>avatarButtonTooltip}"/>
					<ToggleButton
						icon="sap-icon://cart"
						pressed="{= ${appView>/layout}.startsWith('ThreeColumns') }"
						tooltip="{i18n>toCartButtonTooltip}"
						press=".onToggleCart">
					</ToggleButton>
				</contentRight>
			</Bar>
		</customHeader>
		<footer>
			<Toolbar>
				<ToolbarSpacer/>
				<Button
					text="{i18n>addToCartShort}"
					type="Emphasized"
					press=".onAddToCart" />
			</Toolbar>
		</footer>
		<content>
			<ObjectHeader
				title="{Name}"
				titleLevel="H3"
				number="{
					path : 'Price',
					formatter : '.formatter.price'
				}"
				numberUnit="EUR">
				<attributes>
					<ObjectAttribute
						title="{i18n>productSupplierAttributeText}"
						text="{SupplierName}"/>
					<ObjectAttribute
						title="{i18n>productDescriptionAttributeText}"
						text="{ShortDescription}"/>
					<ObjectAttribute
						title="{i18n>productWeightAttributeText}"
						text="{Weight} {WeightUnit}"/>
					<ObjectAttribute
						title="{i18n>productMeasuresAttributeText}"
						text="{DimensionWidth} {Unit}, {DimensionDepth} {Unit}, {DimensionHeight} {Unit}"/>
				</attributes>
				<statuses>
					<ObjectStatus
						text="{
							path : 'Status',
							formatter : '.formatter.statusText'
						}"
						state="{
							path : 'Status',
							formatter : '.formatter.statusState'
						}"/>
				</statuses>
			</ObjectHeader>
			<VBox
				alignItems="Center"
				renderType="Div">
				<Image
					id="productImage"
					src="{path : 'PictureUrl', formatter : '.formatter.pictureUrl'}"
					decorative="true"
					densityAware="false"
					class="sapUiSmallMargin"
					width="100%"
					height="100%">
					<detailBox>
						<LightBox id="lightBox">
							<imageContent>
								<LightBoxItem
									imageSrc="{path : 'PictureUrl', formatter : '.formatter.pictureUrl'}"
									title="{Name}"/>
							</imageContent>
						</LightBox>
					</detailBox>
				</Image>
			</VBox>
		</content>
	</Page>
</mvc:View>
