<mvc:View
	id="view1"
	height="100%"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:layout="sap.ui.layout"
	xmlns:semantic="sap.f.semantic"
	controllerName="sap.f.sample.SemanticPageFreeStyle.controller.SemanticPageFreeStyle">

	<semantic:SemanticPage
		id="mySemanticPage"
		headerPinnable="true"
		toggleHeaderOnTitleClick="true"
		preserveHeaderStateOnScroll="false"
		titleAreaShrinkRatio="1:1.6:1.6"
		showFooter="true">

		<!-- Title Heading-->
		<semantic:titleHeading>
			<Title text="{/title}" />
		</semantic:titleHeading>

		<!-- Title Breadcrumbs-->
		<semantic:titleBreadcrumbs>
			<Breadcrumbs>
				<Link text="Home" />
				<Link text="Page 1" />
				<Link text="Page 2" />
				<Link text="Page 3" />
				<Link text="Page 4" />
				<Link text="Page 5" />
			</Breadcrumbs>
		</semantic:titleBreadcrumbs>

		<!-- Title Snapped On Mobile Content-->
		<semantic:titleSnappedOnMobile>
			<Title text="{/titleSnappedContent/text}"/>
		</semantic:titleSnappedOnMobile>

		<!-- Title Content-->
		<semantic:titleContent>
			<Image src="./test-resources/sap/f/images/KPI.png" tooltip="This is just a placeholder, not a real KPI control." height="2rem" width="3.5rem"/>
		</semantic:titleContent>

		<!-- TitleExpanded content-->
		<semantic:titleSnappedContent>
			<Text text="{/titleSnappedContent/text}"/>
		</semantic:titleSnappedContent>

		<!-- Header Content -->
		<semantic:headerContent>
			<layout:HorizontalLayout allowWrapping="true">
				<layout:VerticalLayout class="sapUiMediumMarginEnd">
					<ObjectAttribute title="Functional Area" text="{/objectDescription/category}"/>
					<ObjectAttribute title="Cost Center" text="{/objectDescription/center}"/>
					<ObjectAttribute title="Email" text="{/objectDescription/email}"/>
				</layout:VerticalLayout>

				<layout:VerticalLayout>
					<ObjectAttribute title="Availability"/>

					<ObjectStatus text="In Stock" state="{/objectDescription/status}" />
				</layout:VerticalLayout>
			</layout:HorizontalLayout>
		</semantic:headerContent>

		<!-- Content -->
		<semantic:content>
			<Table
				id="idProductsTable"
				inset="false"
				items="{path:'/ProductCollection'}"
				class="sapFSemanticPageAlignContent"
				width="auto">

				<columns>
					<Column>
						<Text text="Name"/>
					</Column>
					<Column minScreenWidth="Tablet" demandPopin="true">
						<Text text="Category"/>
					</Column>
					<Column minScreenWidth="Tablet" demandPopin="true">
						<Text text="SupplierName"/>
					</Column>
				</columns>

				<items>
					<ColumnListItem vAlign="Middle">
						<cells>
							<ObjectIdentifier title="{Name}" text="{ProductId}"/>
							<Text text="{Category}"/>
							<Text text="{SupplierName}"/>
						</cells>
					</ColumnListItem>
				</items>
			</Table>
		</semantic:content>

		<semantic:titleMainAction>
			<semantic:TitleMainAction text="Edit"/>
		</semantic:titleMainAction>

		<semantic:addAction>
			<semantic:AddAction />
		</semantic:addAction>

		<semantic:deleteAction>
			<semantic:DeleteAction />
		</semantic:deleteAction>

		<semantic:copyAction>
			<semantic:CopyAction />
		</semantic:copyAction>

		<semantic:editAction>
			<semantic:EditAction />
		</semantic:editAction>

		<semantic:favoriteAction>
			<semantic:FavoriteAction />
		</semantic:favoriteAction>

		<semantic:flagAction>
			<semantic:FlagAction />
		</semantic:flagAction>

		<semantic:closeAction>
			<semantic:CloseAction />
		</semantic:closeAction>

		<semantic:fullScreenAction>
			<semantic:FullScreenAction visible="{/notMobile}"/>
		</semantic:fullScreenAction>

		<semantic:exitFullScreenAction>
			<semantic:ExitFullScreenAction visible="{/notMobile}"/>
		</semantic:exitFullScreenAction>

		<!-- Custom Title Text Content-->
		<semantic:titleCustomTextActions>
			<Button text="ToggleFooter" press="showFooter"/>
		</semantic:titleCustomTextActions>

		<!-- Custom Title Icon Content-->
		<semantic:titleCustomIconActions>
			<OverflowToolbarButton icon="sap-icon://cart" text="cart" />
		</semantic:titleCustomIconActions>

		 <!--Semantic ShareMenu Buttons-->
		<semantic:discussInJamAction>
			<semantic:DiscussInJamAction />
		</semantic:discussInJamAction>

		<semantic:shareInJamAction>
			<semantic:ShareInJamAction />
		</semantic:shareInJamAction>

		<semantic:printAction>
			<semantic:PrintAction />
		</semantic:printAction>

		<semantic:sendEmailAction>
			<semantic:SendEmailAction />
		</semantic:sendEmailAction>

		<semantic:sendMessageAction>
			<semantic:SendMessageAction />
		</semantic:sendMessageAction>

		<!-- Custom Share Actions -->
		<semantic:customShareActions>
			<Button icon= "sap-icon://bed" text="Bed" />
			<Button icon= "sap-icon://flight" text="Flight" />
		</semantic:customShareActions>

		<!-- Semantic Footer Buttons -->
		<semantic:positiveAction>
			<semantic:PositiveAction />
		</semantic:positiveAction>

		<semantic:negativeAction>
			<semantic:NegativeAction />
		</semantic:negativeAction>

		<semantic:messagesIndicator>
			<semantic:MessagesIndicator press="onMessagesButtonPress"/>
		</semantic:messagesIndicator>

		<!-- Custom Footer Content-->
		<semantic:footerCustomActions>
			<Button text="Save" />
			<Button text="Cancel" />
		</semantic:footerCustomActions>

	</semantic:SemanticPage>
</mvc:View>
