<mvc:View
		controllerName="sap.ui.documentation.sdk.controller.DemoApps"
		xmlns="sap.m"
		xmlns:core="sap.ui.core"
		xmlns:mvc="sap.ui.core.mvc"
		xmlns:l="sap.ui.layout">
	<Page
		id="demoAppsPage"
		showSubHeader="false"
		showFooter="false"
		showHeader="false"
		class="sapUiDemoApps">
		<landmarkInfo>
			<PageAccessibleLandmarkInfo
				headerRole="Region"
				headerLabel="Demo Apps"
				contentRole="Main"
				contentLabel="Demo Apps by Category"/>
		</landmarkInfo>
		<content>
			<ScrollContainer vertical="true" width="100%" height="100%">
				<Panel
					id="rootPage"
					accessibleRole="Region"
					class="sapUiNoContentPadding">
					<l:BlockLayout
						id="headerLayout"
						background="Light">
						<l:BlockLayoutRow>
							<l:BlockLayoutCell
								class="sapUiDemokitLandingImageCell sapUiNoContentPadding">
								<Image
									id="phoneImage"
									src="./resources/sap/ui/documentation/sdk/images/DemoApps_S_cropped.jpg"
									alt="{i18n>DEMO_APPS_IMAGE_PHONE}"
									width="100%"
									class="welcomeImage"
									load=".handleLandingImageLoad"
									visible="{device>/system/phone}"
									densityAware="false"/>
								<Image
									id="desktopImage"
									class="desktopImage welcomeImage"
									src="./resources/sap/ui/documentation/sdk/images/DemoApps_M_and_L_cropped.jpg"
									alt="{i18n>DEMO_APPS_IMAGE_DESKTOP}"
									densityAware="false"
									load=".handleLandingImageLoad"
									visible="{=!${device>/system/phone}}"
									width="100%"/>
								<l:Grid
									id="landingImageHeadline"
									width="100%"
									visible="false"
									class="headerGrid"
									hSpacing="0"
									defaultSpan="L6 M6 S12">
									<l:VerticalLayout width="100%" class="sapUiTinyMarginTop sapUiTinyMarginEnd">
										<Text class="headerText" text="{i18n>DEMO_APPS_TEXT}" width="100%" textAlign="Left"/>
										<l:HorizontalLayout>
											<Button
												class="actionButton headerButton"
												id="download"
												text="{i18n>DEMO_APPS_DOWNLOAD_BTN}"
												type="Emphasized"
												press=".onDownloadButtonPress">
											</Button>
											<Button
												class="actionButton headerButton sapContrast sapContrastPlus sapUiSmallMarginBegin"
												id="readMoreButton"
												text="{i18n>DEMO_APPS_READ_MORE_BTN}"
												press=".onReadMoreButtonPress">
											</Button>
										</l:HorizontalLayout>
									</l:VerticalLayout>
								</l:Grid>
							</l:BlockLayoutCell>
						</l:BlockLayoutRow>
					</l:BlockLayout>
				</Panel>
				<l:VerticalLayout content="{/demoAppsByCategory}" width="100%">
					<Panel
						accessibleRole="Region"
						backgroundDesign="Transparent"
						class="sapUiNoContentPadding">
						<headerToolbar>
							<Toolbar class="headlineCell">
								<Title
									text="{
										path: 'categoryId',
										formatter: '.formatter.categoryName'
									}"
									level="H1"
									titleStyle="H1"
									class="sapUiMediumMarginTopBottom"/>
							</Toolbar>
						</headerToolbar>
						<l:BlockLayout
							content="{
								 path: 'rows',
								 templateShareable: false
							}"
							background="Light">
							<l:BlockLayoutRow content="{
								path: '',
								factory: '.createDemoAppCell'
							}"/>
						</l:BlockLayout>
					</Panel>
				</l:VerticalLayout>
				<l:BlockLayout
						id="demoAppsFooter"
						visible="{/bFooterVisible}">
					<l:BlockLayoutRow>
						<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
					</l:BlockLayoutRow>
				</l:BlockLayout>
			</ScrollContainer>
		</content>
		<dependents>
			<Dialog id="downloadDialog"
				title="{i18n>DEMO_APPS_DOWNLOAD_DIALOG_TITLE}">
				<subHeader>
					<Toolbar>
						<SearchField id="downloadDialogSearch" liveChange=".onSearch"/>
					</Toolbar>
				</subHeader>
				<List items="{/demoApps}" id="downloadDialogList">
					<InputListItem
						visible="{= !!${config} }"
						label="{name}">
						<customData>
							<core:CustomData key="config" value="{config}"/>
						</customData>
						<Button
							text="{i18n>DEMO_APPS_DOWNLOAD_BTN}"
							type="Emphasized"
							press=".onDownloadPress"/>
					</InputListItem>
				</List>
				<buttons>
					<Button text="{i18n>DEMO_APPS_DOWNLOAD_DIALOG_CANCEL_BTN}" press=".onCloseDialog" />
				</buttons>
			</Dialog>
		</dependents>
	</Page>
</mvc:View>
