<mvc:View
	controllerName="sap.ui.documentation.sdk.controller.DemoApps"
	xmlns="sap.m"
	xmlns:f="sap.f"
	xmlns:card="sap.f.cards"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:grid="sap.ui.layout.cssgrid"
	xmlns:custom="sap.ui.documentation"
	displayBlock="true"
	height="100%">

	<ScrollContainer
		class="sapUiDemoKitDemoAppsPage"
		id="sapUiDemoKitDemoAppsPage"
		vertical="true"
		horizontal="false"
		width="100%"
		height="100%">

		<VBox class="sapUiDemoKitDemoAppsIntroCardSpacing">
			<f:Card class="sapUiDemoKitDemoAppsIntroCard">
				<f:header>
					<card:Header
						title="{i18n>DEMO_APPS_TITLE}"
						subtitle="{= ${versionData>/isOpenUI5}
							? ${i18n>DEMO_APPS_SUBTITLE_OPENUI5}
							: ${i18n>DEMO_APPS_SUBTITLE_SAPUI5} }"
						subtitleMaxLines="5" />
				</f:header>
				<f:content>
					<Button text="{i18n>DEMO_APPS_READ_MORE_BTN}" press=".onReadMoreButtonPress" />
				</f:content>
			</f:Card>
		</VBox>

		<grid:CSSGrid class="sapUiDemoKitDemoAppsLayoutSpacing">
			<!-- Page Content Ratio Config -->
			<grid:customLayout>
				<grid:GridResponsiveLayout>
					<grid:layout>
						<grid:GridSettings gridTemplateColumns="1fr" gridColumnGap="1rem" />
					</grid:layout>
					<grid:layoutL>
						<grid:GridSettings gridTemplateColumns="2fr 1fr" gridColumnGap="1rem" />
					</grid:layoutL>
					<grid:layoutXL>
						<grid:GridSettings gridTemplateColumns="3fr 1fr" gridColumnGap="1rem" />
					</grid:layoutXL>
				</grid:GridResponsiveLayout>
			</grid:customLayout>

			<grid:items>
				<!-- Main -->
				<grid:CSSGrid id="sapUiDemoKitDemoAppsMain" class="sapUiDemoKitDemoAppsMain"
					items="{/demoAppsByCategory}">
					<grid:customLayout>
						<grid:GridBasicLayout gridRowGap="3rem" />
					</grid:customLayout>

					<grid:CSSGrid>
						<grid:customLayout>
							<grid:GridBasicLayout gridRowGap="1rem" />
						</grid:customLayout>

						<grid:customData>
							<core:CustomData
								key="demoAppsCategoryClass"
								value="{
									path: 'categoryId',
									formatter: '.formatter.getDemoAppsCategoryClass' }" />
						</grid:customData>

						<Title
							class="sapUiDemoKitDemoAppsCategoryTitle"
							text="{ path: 'categoryId', formatter: '.formatter.getDemoAppsCategoryTitle' }"
							level="H3"
							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }"
							wrapping="true" />

						<grid:CSSGrid items="{ path: 'rows', templateShareable: false }">
							<grid:customLayout>
								<grid:GridResponsiveLayout>
									<grid:layoutS>
										<grid:GridSettings
											gridTemplateColumns="1fr"
											gridAutoRows="minmax(15rem, auto)"
											gridGap="1rem" />
									</grid:layoutS>
									<grid:layout>
										<grid:GridSettings
											gridTemplateColumns="repeat(2, 1fr)"
											gridAutoRows="minmax(15rem, auto)"
											gridGap="1rem" />
									</grid:layout>
									<grid:layoutXL>
										<grid:GridSettings
											gridTemplateColumns="repeat(3, 1fr)"
											gridAutoRows="minmax(15rem, auto)"
											gridGap="1rem" />
									</grid:layoutXL>
								</grid:GridResponsiveLayout>
							</grid:customLayout>

							<f:Card class="sapUiDemoKitDemoAppsRegularCard">
								<f:header>
									<card:Header title="{name}" iconSrc="{= 'sap-icon://' + ${icon} }" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitDemoAppsCardContentSpacing" wrap="Wrap">
										<Text class="sapUiSmallMarginBottom" text="{desc}" >
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<VBox
											class="sapUiTinyMarginBottom"
											items="{ path: 'links', templateShareable: false }"
											visible="{= !!${links}.length }"
											wrap="Wrap">
											<Link
												href="{ path: 'ref', formatter: '.formatter.crossLink' }"
												target="_blank"
												text="{name}"
												wrapping="true" />
										</VBox>
										<HBox wrap="Wrap">
											<Link
												class="sapUiDemoKitDemoAppsCardLink"
												href="{ref}"
												target="_blank"
												text="{i18n>DEMO_APPS_CARD_LINK}"
												wrapping="true" />
										</HBox>
											<customData>
												<core:CustomData key="config" value="{config}" />
												<core:CustomData key="label" value="{name}" />
											</customData>

											<Link
											class="sapUiDemoKitDemoAppsCardDownloadLink"
											text="{i18n>DEMO_APPS_CARD_DOWNLOAD_LINK}"
											press=".onDownloadPress"
											visible="{= !!${config} }"
											wrapping="true"  />
									</VBox>
								</f:content>
							</f:Card>
						</grid:CSSGrid>
					</grid:CSSGrid>

				</grid:CSSGrid> <!-- Main Container End-->

				<!-- Aside -->
				<grid:CSSGrid id="sapUiDemoKitDemoAppsAside" class="sapUiDemoKitDemoAppsAside">
					<VBox class="sapUiDemoKitDemoAppsAsideDesktop" wrap="Wrap">
						<f:Card class="sapUiDemoKitDemoAppsAsideCard">
							<f:header>
								<card:Header title="{i18n>DEMO_APPS_DOWNLOAD_OVERVIEW}" />
							</f:header>
							<f:content>
								<List items="{/demoApps}" showSeparators="None">
									<InputListItem visible="{= !!${config} }" label="{name}">
										<customData>
											<core:CustomData key="config" value="{config}" />
										</customData>
										<Button class="sapUiDemoKitDemoAppsCardDownloadButton"
											type="Transparent" icon="sap-icon://download" press=".onDownloadPress" />
									</InputListItem>
								</List>
							</f:content>
						</f:Card>
					</VBox>

					<VBox class="sapUiDemoKitDemoAppsAsideMobile" wrap="Wrap">
						<Panel class="sapUiDemoKitDemoAppsAsidePanel" expandable="true" headerText="{i18n>DEMO_APPS_DOWNLOAD_OVERVIEW}">
							<List items="{/demoApps}" showSeparators="None">
								<InputListItem visible="{= !!${config} }" label="{name}">
									<customData>
										<core:CustomData key="config" value="{config}" />
									</customData>
									<Button class="sapUiDemoKitDemoAppsCardDownloadButton"
										type="Transparent" icon="sap-icon://download" press=".onDownloadPress" />
								</InputListItem>
							</List>
						</Panel>
					</VBox>
				</grid:CSSGrid> <!-- Aside Container End-->

			</grid:items>
		</grid:CSSGrid>

		<core:Fragment fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
	</ScrollContainer>
</mvc:View>