<mvc:View
	controllerName="sap.ui.documentation.sdk.controller.App"
	xmlns="sap.m"
	xmlns:tnt="sap.tnt"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:grid="sap.ui.layout.cssgrid"
	xmlns:custom="sap.ui.documentation"
	displayBlock="true"
	busy="{appView>/busy}"
	busyIndicatorDelay="{appView>/delay}">

	<tnt:ToolPage id="demoKitPage" class="sapUiDemokit">
		<tnt:header>
			<tnt:ToolHeader id="demoKitHeader" class="sapUiDemokitMainHeader">
				<grid:CSSGrid width="100%" class="sapUiDemokitMainHeaderGrid">

					<grid:customLayout>
						<grid:GridResponsiveLayout>
							<grid:layoutXL>
								<grid:GridSettings
									gridTemplateColumns="1fr auto 1fr">
								</grid:GridSettings>
							</grid:layoutXL>
							<grid:layoutL>
								<grid:GridSettings gridTemplateColumns="1fr auto 1fr">
								</grid:GridSettings>
							</grid:layoutL>
							<grid:layoutM>
								<grid:GridSettings gridTemplateColumns="1fr auto auto">
								</grid:GridSettings>
							</grid:layoutM>
							<grid:layoutS>
								<grid:GridSettings gridTemplateColumns="1fr auto auto">
								</grid:GridSettings>
							</grid:layoutS>
						</grid:GridResponsiveLayout>
					</grid:customLayout>

					<HBox alignItems="{= ${appView>/bPhoneSize} ? 'Center' : 'Baseline' }">
						<Button
							icon="sap-icon://menu2"
							press=".onSideNavigationButtonPress"
							visible="{appView>/bPhoneSize}" />

						<Image
							src="{= ${versionData>/isOpenUI5} ? ${theme>/OpenUI5Logo} : ${theme>/SAPUI5Logo} }"
							alt="{i18n>APP_HEADER_LOGO_ALT}"
							class="sapUiDemokitMainHeaderLogo"
							height="2rem"
							id="sap_logo"
							decorative="false"
							press=".onHeaderLogoPress" />

						<Title
							class="sapUiSmallMarginBeginEnd"
							text="{i18n>APP_HEADER_TITLE}"
							tooltip="{i18n>APP_HEADER_TITLE}"
							visible="{= !${appView>/bPhoneSize} }" />
					</HBox>

					<HBox justifyContent="Center" alignItems="Center">
						<custom:Search
							id="searchControl"
							toggle="onToggleSearchMode"
							search="onSearch"
							liveChange="onSearchLiveChange"
							isOpen="{appView>/bDesktopSize}" />
					</HBox>

					<OverflowToolbar class="sapUiDemoKitHeaderOTB" style="Clear">
						<ObjectStatus
							text="{ parts:
								['appView>/bShowVersionSwitchButton', 'versionData>/isDevVersion', 'versionData>/fullVersion'],
								formatter: '.formatter.formatVersionStatus'
							}"
							state="Information"
							inverted="false"
							visible="{= ${appView>/bDesktopSize} &amp;&amp; !${appView>/bSearchMode} }">
						</ObjectStatus>

						<Button
							id="versionSwitchButton"
							class="sapUiDemoKitHeaderActionsVersionSwitch"
							type="Default"
							icon="sap-icon://dimension"
							text="{= ${appView>/bDesktopSize}
								? [${i18n>APP_VERSION_VERSION}, ${versionData>/fullVersion}].join(' ')
								: '' }"
							tooltip="{= ${appView>/bDesktopSize}
								? [${i18n>APP_VERSION_VERSION}, ${versionData>/fullVersion}].join(' ')
								: '' }"
							press=".onChangeVersionButtonPress"
							visible="{= ${appView>/bShowVersionSwitchButton} }">
						</Button>

						<OverflowToolbarButton
							id="surveyButton"
							class="sapUiDemoKitHeaderActionsSurveyButton"
							icon="sap-icon://feedback"
							press=".launchSurvey"
							text="{i18n>APP_INFORMATION_BTN_FEEDBACK}"
							tooltip="{i18n>APP_FEEDBACK_BTN_TOOLTIP}">
							<customData>
								<BadgeCustomData visible="{appView>/bShowLongSurvey}" value="1" />
							</customData>
						</OverflowToolbarButton>

						<OverflowToolbarMenuButton
							class="sapUiDemoKitHeaderActionsMenuButton"
							icon="sap-icon://official-service"
							text="{i18n>APP_INFORMATION_BTN_POLICIES}"
							tooltip="{i18n>APP_LEGAL_BTN_TOOLTIP}">
							<menu>
								<Menu itemSelected=".onMenuButtonItemSelected">
									<MenuItem
										key="legal"
										icon="sap-icon://compare"
										text="{i18n>APP_INFORMATION_BTN_LEGAL}" />
									<MenuItem
										key="privacy"
										icon="sap-icon://locked"
										text="{i18n>APP_INFORMATION_BTN_PRIVACY}" />
									<MenuItem
										key="license"
										icon="sap-icon://permission"
										text="{i18n>APP_INFORMATION_BTN_LICENSE}"
										visible="{versionData>/isOpenUI5}" />
									<MenuItem
										key="terms_of_use"
										icon="sap-icon://document-text"
										text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}"
										visible="{versionData>/isOpenUI5}" />
									<MenuItem
										key="cookie_preferences"
										icon="sap-icon://user-settings"
										text="{i18n>APP_SETTINGS_DIALOG_COOKIE_PREFERENCES}" />
									<MenuItem
										key="terms_of_use"
										icon="sap-icon://document-text"
										text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}"
										visible="{= !${versionData>/isOpenUI5} &amp;&amp; !${versionData>/isDevEnv} }">
										<items>
											<MenuItem key="terms_of_use" text="{i18n>APP_INFORMATION_BTN_TERMS_OF_USE}" />
											<MenuItem key="copyright" text="{i18n>APP_INFORMATION_BTN_COPYRIGHT}" />
											<MenuItem key="trademark" text="{i18n>APP_INFORMATION_BTN_TRADEMARK}" />
											<MenuItem key="disclaimer" text="{i18n>APP_INFORMATION_BTN_DISCLAIMER}" />
										</items>
									</MenuItem>
								</Menu>
							</menu>
						</OverflowToolbarMenuButton>

						<OverflowToolbarMenuButton
							id="aboutMenuButton"
							class="sapUiDemoKitHeaderActionsMenuButton"
							icon="sap-icon://action-settings"
							text="{i18n>APP_INFORMATION_BTN_SETTINGS}"
							tooltip="{i18n>APP_INFORMATION_BTN_TOOLTIP}">
							<menu>
								<Menu itemSelected=".onMenuButtonItemSelected">
									<items>
										<MenuItem
											key="about"
											icon="sap-icon://hint"
											text="{i18n>APP_INFORMATION_BTN_ABOUT}" />
										<MenuItem
											key="appearance"
											icon="sap-icon://palette"
											text="{i18n>APP_INFORMATION_BTN_APPEARANCE}">
											<items>
												<MenuItem key="light" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_LIGHT}" />
												<MenuItem key="dark" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_DARK}" />
												<MenuItem key="hcb" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_HCB}" />
												<MenuItem key="hcw" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_HCW}" />
												<MenuItem key="auto" text="{i18n>APP_INFORMATION_BTN_APPEARANCE_AUTO}" />
											</items>
										</MenuItem>
										<MenuItem
											key="sitemap"
											icon="sap-icon://tree"
											text="{i18n>APP_INFORMATION_BTN_SITEMAP}"
											visible="{versionData>/isOpenUI5}" />
										<MenuItem
											key="settings"
											icon="sap-icon://hello-world"
											text="{i18n>APP_SETTINGS_DIALOG_LANGUAGE}" />
										<MenuItem
											key="cookie_preferences"
											icon="sap-icon://customize"
											text="{i18n>APP_SETTINGS_DIALOG_COOKIE_PREFERENCES}"
											visible="{versionData>/enableAdvancedCookieSettings}" />
									</items>
								</Menu>
							</menu>
						</OverflowToolbarMenuButton>

						<OverflowToolbarButton
							class="sapUiDemoKitHeaderActionsNewsButton"
							icon="sap-icon://bell"
							press=".onNewsButtonPress"
							text="{i18n>APP_INFORMATION_BTN_NEWS}"
							tooltip="{i18n>APP_NEWS_BTN_TOOLTIP}"
							visible="{= !${versionData>/isURLVersioned} }">
							<customData>
								<BadgeCustomData key="badge" value="{news>/newsCount}" />
							</customData>
						</OverflowToolbarButton>
					</OverflowToolbar>
				</grid:CSSGrid>
			</tnt:ToolHeader>
		</tnt:header>

		<tnt:subHeader>
			<tnt:ToolHeader class="sapUiDemokitSubHeader" visible="{= !${appView>/bPhoneSize} }">
				<IconTabHeader
					id="demoKitSubHeader"
					mode="Inline"
					select=".navigateToSection"
					selectedKey="home">
					<items>
						<IconTabFilter
							id="welcomeTab"
							key="home"
							icon="sap-icon://home"
							text="{i18n>APP_TABHEADER_ITEM_HOME}">
						</IconTabFilter>
						<IconTabFilter
							id="topicMasterTab"
							key="topic"
							icon="sap-icon://learning-assistant"
							text="{i18n>APP_TABHEADER_ITEM_DOCUMENTATION}">
						</IconTabFilter>
						<IconTabFilter
							id="apiMasterTab"
							key="api"
							icon="sap-icon://syntax"
							text="{i18n>APP_TABHEADER_ITEM_API_REFERENCE}">
						</IconTabFilter>
						<IconTabFilter
							id="controlsMasterTab"
							key="controls"
							icon="sap-icon://example"
							text="{i18n>APP_TABHEADER_ITEM_SAMPLES}">
						</IconTabFilter>
						<IconTabFilter
							id="demoAppsTab"
							key="demoapps"
							icon="sap-icon://grid"
							text="{i18n>APP_TABHEADER_ITEM_DEMO_APPS}">
						</IconTabFilter>
						<IconTabFilter
							id="resourcesTab"
							key="resources"
							icon="sap-icon://wrench"
							text="{i18n>APP_TABHEADER_ITEM_RESOURCES}">
						</IconTabFilter>
					</items>
				</IconTabHeader>
			</tnt:ToolHeader>
		</tnt:subHeader>

		<tnt:sideContent>
			<tnt:SideNavigation
				id="demoKitSideNavigation"
				visible="{appView>/bPhoneSize}"
				expanded="false"
				selectedKey="home"
				itemSelect=".navigateToSection">
				<tnt:NavigationList>
					<tnt:NavigationListItem
						key="home"
						icon="sap-icon://home"
						text="{i18n>APP_TABHEADER_ITEM_HOME}" />
					<tnt:NavigationListItem
						key="topic"
						icon="sap-icon://learning-assistant"
						text="{i18n>APP_TABHEADER_ITEM_DOCUMENTATION}" />
					<tnt:NavigationListItem
						key="api"
						icon="sap-icon://syntax"
						text="{i18n>APP_TABHEADER_ITEM_API_REFERENCE}" />
					<tnt:NavigationListItem
						key="controls"
						icon="sap-icon://example"
						text="{i18n>APP_TABHEADER_ITEM_SAMPLES}" />
					<tnt:NavigationListItem
						key="demoapps"
						icon="sap-icon://grid"
						text="{i18n>APP_TABHEADER_ITEM_DEMO_APPS}" />
					<tnt:NavigationListItem
						key="resources"
						icon="sap-icon://wrench"
						text="{i18n>APP_TABHEADER_ITEM_RESOURCES}">
					</tnt:NavigationListItem>
				</tnt:NavigationList>
			</tnt:SideNavigation>
		</tnt:sideContent>

		<tnt:mainContents>
			<VBox items="{messagesData>/messages}" width="100%" class="sapUiTinyMarginTop" visible="{=!!${messagesData>/iVisibleMessagesCount}}">
				<items>
					<MessageStrip close=".onCloseImportantMessage" text="{
						parts: [
							'messagesData>text'
						],
						formatter: '.formatter.formatImportantMessage'
					}" class="sapUiTinyMarginBottom sapUiTinyMarginBeginEnd" showIcon="true" showCloseButton="{= !${messagesData>mandatory} }" visible="{messagesData>isMessageVisible}" type="{messagesData>type}">
						<customData>
							<core:CustomData key="messageID" value="{messagesData>id}" />
						</customData>
						<link>
							<Link
								visible="{= (!!${messagesData>linkText} &amp;&amp; !!${messagesData>linkHref}) }"
								text="{messagesData>linkText}"
								target="_blank"
								href="{messagesData>linkHref}" />
						</link>
					</MessageStrip>
				</items>
			</VBox>
			<OverflowToolbar
				visible="{= (${appView>/bHasMaster} &amp;&amp; !${appView>/bLandscape}) &#124;&#124; ${appView>/bHasMaster} &amp;&amp; ${appView>/device/system/phone} }">
				<ToggleButton
					class="sapUiDocumentationMasterToggleButton"
					press=".toggleMaster"
					pressed="{appView>/bIsShownMaster}"
					icon="{= ${appView>/bIsShownMaster} ? 'sap-icon://navigation-left-arrow' : 'sap-icon://navigation-right-arrow' }" />
				<Title level="H3" text="{appView>/selectedSectionTitle}" />
			</OverflowToolbar>

			<ScrollContainer
				id="demoKitScrollContainer"
				width="100%"
				height="{= ${appView>/bHasMaster} &amp;&amp; !${appView>/bLandscape} &amp;&amp; ${appView>/device/system/desktop} ? 'calc(100% - 2rem)'
					: (${appView>/bHasMaster} &amp;&amp; !${appView>/bLandscape}) ? 'calc(100% - 2.75rem)'
					: (${appView>/bHasMaster} &amp;&amp; ${appView>/device/system/phone}) ? 'calc(100% - 2.75rem)'
					: '100%'}"
				horizontal="false"
				vertical="false">

				<SplitApp
					id="splitApp"
					class="sapUiDocumentationSplitApp"
					mode="HideMode"
					defaultTransitionNameDetail="show"
					defaultTransitionNameMaster="fade" />
			</ScrollContainer>
		</tnt:mainContents>
	</tnt:ToolPage>
</mvc:View>