<mvc:View
	controllerName="sap.f.sample.GridContainer.C"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:f="sap.f"
	xmlns:card="sap.f.cards"
	xmlns:core="sap.ui.core"
	xmlns:w="sap.ui.integration.widgets"
	displayBlock="true"
	height="100%">
	<ScrollContainer
		height="100%"
		width="100%"
		vertical="true">
		<ToggleButton
			id="revealGrid"
			text="Reveal Grid"
			press="onRevealGrid"
			class="sapUiSmallMargin" />

		<Panel headerText="Grid Container Properties">
			<HBox alignItems="Center">
				<Label width="8rem" class="sapUiSmallMarginBegin" text="Snap to Row:" />
				<Switch change="onSnapToRowChange" state="false" />
				<Text class="sapUiTinyMarginBeginEnd" text="(Should the items stretch to fill the rows which they occupy, or not. If turned on the items will stretch.)" />
			</HBox>
			<HBox alignItems="Center">
				<Label width="8rem" class="sapUiSmallMarginBegin" text="Allow dense fill:" />
				<Switch change="onAllowDenseFillChange" state="false" />
				<Text class="sapUiTinyMarginBeginEnd" text="(Experimental. Smaller items will take up all of the available space, ignoring their order.)" />
			</HBox>
			<HBox alignItems="Center">
				<Label width="8rem" class="sapUiSmallMarginBegin" text="Inline block layout:" />
				<Switch change="onInlineBlockLayoutChange" state="false" />
				<Text class="sapUiTinyMarginBeginEnd" text="(Experimental. Makes the grid items act like an inline-block elements.)" />
			</HBox>
		</Panel>
		<Panel>
			<Text class="sapUiSmallMarginBegin" id="columnsCountText" />
		</Panel>
		<f:GridContainer id="demoGrid" class="sapUiSmallMargin" columnsChange=".onGridColumnsChange">
			<f:layout>
				<f:GridContainerSettings rowSize="84px" columnSize="84px" gap="8px" />
			</f:layout>
			<f:layoutXS>
				<f:GridContainerSettings rowSize="70px" columnSize="70px" gap="8px" />
			</f:layoutXS>

			<GenericTile
				press="onPress"
				header="Sales Fulfillment Application Title"
				subheader="Subtitle">
				<layoutData>
					<f:GridContainerItemLayoutData minRows="2" columns="2" />
				</layoutData>
				<TileContent unit="EUR" footer="Current Quarter">
					<ImageContent src="sap-icon://home-share" />
				</TileContent>
			</GenericTile>

			<w:Card manifest="test-resources/sap/f/demokit/sample/GridContainer/cardManifest.json">
				<w:layoutData>
					<f:GridContainerItemLayoutData minRows="3" columns="4" />
				</w:layoutData>
			</w:Card>

			<GenericTile header="Manage Activity Master Data Type" subheader="Subtitle">
				<layoutData>
					<f:GridContainerItemLayoutData minRows="2" columns="2" />
				</layoutData>
				<TileContent>
					<ImageContent src="sap-icon://activities" />
				</TileContent>
			</GenericTile>

			<f:Card>
				<f:layoutData>
					<f:GridContainerItemLayoutData columns="4" />
				</f:layoutData>
				<f:header>
					<card:Header
						title="Buy bus ticket on-line"
						subtitle="Buy a single drive ticket for a date"
						iconSrc="sap-icon://bus-public-transport"
						press="onPress"/>
				</f:header>
				<f:content>
					<VBox
						height="115px"
						class="sapUiSmallMargin"
						justifyContent="SpaceBetween">
						<HBox justifyContent="SpaceBetween">
							<ComboBox
								width="120px"
								placeholder="From City"
								items="{
									path: 'cities>/cities',
									sorter: { path: 'text' }
								}">
								<core:Item key="{cities>key}" text="{cities>text}" />
							</ComboBox>
							<ComboBox
								width="120px"
								placeholder="To City"
								items="{
									path: 'cities>/cities',
									sorter: { path: 'text' }
								}">
								<core:Item key="{cities>key}" text="{cities>text}" />
							</ComboBox>
						</HBox>
						<HBox justifyContent="SpaceBetween">
							<DatePicker width="186px" placeholder="Choose Date ..." />
							<Button text="Book" type="Emphasized" />
						</HBox>
					</VBox>
				</f:content>
			</f:Card>

			<Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat">
				<layoutData>
					<f:GridContainerItemLayoutData columns="4" />
				</layoutData>
			</Text>

			<GenericTile header="Cumulative Totals" subheader="Subtitle">
				<layoutData>
					<f:GridContainerItemLayoutData minRows="2" columns="2" />
				</layoutData>
				<TileContent unit="Unit" footer="Footer Text">
					<NumericContent value="12" />
				</TileContent>
			</GenericTile>

			<GenericTile header="Travel and Expenses" subheader="Access Concur">
				<layoutData>
					<f:GridContainerItemLayoutData minRows="2" columns="2" />
				</layoutData>
				<TileContent>
					<ImageContent src="sap-icon://travel-expense" />
				</TileContent>
			</GenericTile>

			<f:Card>
				<f:layoutData>
					<f:GridContainerItemLayoutData minRows="4" columns="4" />
				</f:layoutData>
				<f:header>
					<card:Header title="Project Cloud Transformation" subtitle="Revenue per Product | EUR" />
				</f:header>
				<f:content>
					<List showSeparators="None" items="{path: 'products>/productItems'}" >
						<CustomListItem>
							<HBox alignItems="Center" justifyContent="SpaceBetween">
								<VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" >
									<Title level="H3" text="{products>title}" />
									<Text text="{products>subtitle}" />
								</VBox>
								<ObjectStatus
									class="sapUiTinyMargin"
									text="{products>revenue}"
									state= "{products>statusSchema}" />
							</HBox>
						</CustomListItem>
					</List>
				</f:content>
			</f:Card>

			<GenericTile header="Success Map" subheader="Access Success Map">
				<layoutData>
					<f:GridContainerItemLayoutData minRows="2" columns="2" />
				</layoutData>
				<TileContent unit="EUR" footer="Current Quarter">
					<ImageContent src="sap-icon://map-3" />
				</TileContent>
			</GenericTile>

			<GenericTile header="My Team Calendar">
				<layoutData>
					<f:GridContainerItemLayoutData minRows="2" columns="2" />
				</layoutData>
				<TileContent unit="EUR" footer="Current Quarter">
					<ImageContent src="sap-icon://check-availability" />
				</TileContent>
			</GenericTile>

			<Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat">
				<layoutData>
					<f:GridContainerItemLayoutData columns="4" />
				</layoutData>
			</Text>
		</f:GridContainer>
	</ScrollContainer>
</mvc:View>