<mvc:View
	controllerName="sap.ui.documentation.sdk.controller.Resources"
	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
		id="sapUiDemoKitResourcesPage"
		class="sapUiDemoKitResourcesPage"
		vertical="true"
		horizontal="false"
		height="100%"
		width="100%">

		<VBox class="sapUiDemoKitResourcesIntroCardSpacing">
			<f:Card class="sapUiDemoKitResourcesIntroCard">
				<f:header>
					<card:Header
						title="{i18n>RESOURCES_INTRO_CARD_TITLE}"
						subtitle="{i18n>RESOURCES_INTRO_CARD_SUBTITLE}"
						subtitleMaxLines="10" />
				</f:header>
			</f:Card>
		</VBox>

		<grid:CSSGrid class="sapUiDemoKitResourcesLayoutSpacing">
			<!-- 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="sapUiDemoKitResourcesMain" class="sapUiDemoKitResourcesMain">
					<grid:customLayout>
						<grid:GridBasicLayout gridRowGap="3rem" />
					</grid:customLayout>

					<!-- #1 Category: Featured -->
					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryFeatured">
						<grid:customLayout>
							<grid:GridBasicLayout gridRowGap="1rem" />
						</grid:customLayout>

						<Title
							class="sapUiDemoKitResourcesCategoryTitle"
							text="{i18n>RESOURCES_CATEGORY_TITLE_FEATURED}"
							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }"
							level="H3"
							wrapping="true" />

						<grid:CSSGrid>
							<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>

							<!-- SAP Fiori Development Portal -->
							<f:Card class="sapUiDemoKitResourcesRegularCard"
								visible="{
									path: 'resources>/fioriDevPortal',
									formatter: '.formatter.formatResourceCardVisibility'
								}">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FIORI_DEV_PORTAL}" iconSrc="sap-icon://explorer" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_FIORI_DEV_PORTAL}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/fioriDevPortal/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_FIORI_DEV_PORTAL}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- Icon Explorer -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_ICON_EXPLORER}" iconSrc="sap-icon://sap-ui5" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_ICON_EXPLORER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/iconExplorer/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_ICON_EXPLORER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- Accessibility Guide -->
							<f:Card class="sapUiDemoKitResourcesRegularCard"
								visible="{
									path: 'resources>/accessibilityGuide',
									formatter: '.formatter.formatResourceCardVisibility'
								}">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_ACC_GUIDE}" iconSrc="sap-icon://show" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_ACC_GUIDE}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/accessibilityGuide/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_ACC_GUIDE}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>
						</grid:CSSGrid>
					</grid:CSSGrid>

					<!-- #2 Category: Development Tools -->
					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryDevTools">
						<grid:customLayout>
							<grid:GridBasicLayout gridRowGap="1rem" />
						</grid:customLayout>

						<Title
							class="sapUiDemoKitResourcesCategoryTitle"
							text="{i18n>RESOURCES_CATEGORY_TITLE_DEV_TOOLS}"
							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }"
							level="H3"
							wrapping="true" />

						<grid:CSSGrid>
							<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>

							<!-- UI5 CLI -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_UI5_CLI}" iconSrc="sap-icon://hello-world" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_UI5_CLI}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/tooling/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_UI5_CLI}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- SAP Fiori Tools -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FIORI_TOOLS}" iconSrc="sap-icon://SAP-icons-TNT/sap-fiori-tools" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_FIORI_TOOLS}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/fioriTools/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_FIORI_TOOLS}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- Card Explorer -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_CARD_EXPLORER}" iconSrc="sap-icon://card" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_CARD_EXPLORER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/cardExplorer/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_CARD_EXPLORER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- UI5 linter -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_LINTER}" iconSrc="sap-icon://syntax" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_LINTER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/linter/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_LINTER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- UI5 MCP server -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_MCPSERVER}" iconSrc="sap-icon://ai" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_MCPSERVER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/mcpserver/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_MCPSERVER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- SAP Fiori MCP server -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FIORI_MCPSERVER}" iconSrc="sap-icon://ai" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_FIORI_MCPSERVER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/fioriMcpServer/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_FIORI_MCPSERVER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- SAP Business Application Studio -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_BUSINESS_APP_STUDIO}" iconSrc="sap-icon://command-line-interfaces" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_BUSINESS_APP_STUDIO}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/businessAppStudio/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_BUSINESS_APP_STUDIO}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

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

					<!-- #3 Category: Customising -->
					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryCustomising">
						<grid:customLayout>
							<grid:GridBasicLayout gridRowGap="1rem" />
						</grid:customLayout>

						<Title
							class="sapUiDemoKitResourcesCategoryTitle"
							text="{i18n>RESOURCES_CATEGORY_TITLE_CUSTOMISING}"
							level="H3"
							wrapping="true"
							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }" />

						<grid:CSSGrid>
							<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>

							<!-- UI Theme Designer -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_THEME_DESIGNER}" iconSrc="sap-icon://palette" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_THEME_DESIGNER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/themeDesigner/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_THEME_DESIGNER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- Theme Parameter Toolbox -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_THEME_PARAMETER_TOOLBOX}" iconSrc="sap-icon://sap-box" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_THEME_PARAMETER_TOOLBOX}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/themeParameterToolbox/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_THEME_PARAMETER_TOOLBOX}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- SAPUI5 Flexibility -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_FLEXIBILITY}" iconSrc="sap-icon://wrench" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_FLEXIBILITY}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/flexibility/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_FLEXIBILITY}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

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

					<!-- #4 Category: Troubleshooting -->
					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryTroubleshooting">
						<grid:customLayout>
							<grid:GridBasicLayout gridRowGap="1rem" />
						</grid:customLayout>

						<Title
							class="sapUiDemoKitResourcesCategoryTitle"
							text="{i18n>RESOURCES_CATEGORY_TITLE_TROUBLESHOOTING}"
							level="H3"
							wrapping="true"
							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }" />

						<grid:CSSGrid>
							<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>

							<!-- UI5 Inspector -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_INSPECTOR}" iconSrc="sap-icon://inspection" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_INSPECTOR}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/inspector/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_INSPECTOR}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- Support Assistant -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_SUPPORT_ASSISTANT}" iconSrc="sap-icon://person-placeholder" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_SUPPORT_ASSISTANT}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/supportAssistant/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_SUPPORT_ASSISTANT}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

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

					<!-- #5 Category: Testing -->
					<grid:CSSGrid class="sapUiDemoKitResourcesCategoryTesting">
						<grid:customLayout>
							<grid:GridBasicLayout gridRowGap="1rem" />
						</grid:customLayout>

						<Title
							class="sapUiDemoKitResourcesCategoryTitle"
							text="{i18n>RESOURCES_CATEGORY_TITLE_TESTING}"
							level="H3"
							wrapping="true"
							titleStyle="{= ${device>/system/phone} ? 'H4' : 'H3' }" />

						<grid:CSSGrid>
							<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>

							<!-- Test Recorder -->
							<f:Card class="sapUiDemoKitResourcesRegularCard"
								visible="{
									path: 'resources>/testRecorder',
									formatter: '.formatter.formatResourceCardVisibility'
								}">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_TEST_RECORDER}" iconSrc="sap-icon://record" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_TEST_RECORDER}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/testRecorder/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_TEST_RECORDER}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

							<!-- wdi5 -->
							<f:Card class="sapUiDemoKitResourcesRegularCard">
								<f:header>
									<card:Header title="{i18n>RESOURCES_CARD_TITLE_WDI5}" iconSrc="sap-icon://order-status" />
								</f:header>
								<f:content>
									<VBox class="sapUiDemoKitResourcesCardContentSpacing" wrap="Wrap">
										<Text text="{i18n>RESOURCES_CARD_DESC_WDI5}">
											<layoutData>
												<FlexItemData growFactor="1" />
											</layoutData>
										</Text>
										<Link
											class="sapUiDemoKitResourcesCardLink"
											href="{resources>/wdi5/href}"
											target="_blank"
											text="{i18n>RESOURCES_CARD_LINK_WDI5}"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											wrapping="true" />
									</VBox>
								</f:content>
							</f:Card>

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

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

				<!-- Aside -->
				<grid:CSSGrid id="sapUiDemoKitResourcesAside" class="sapUiDemoKitResourcesAside">
					<VBox class="sapUiDemoKitResourcesAsideDekstop" wrap="Wrap">
						<f:Card class="sapUiDemoKitResourcesAsideCard">
							<f:header>
								<card:Header title="{i18n>RESOURCES_ASIDE_CARD_TITLE}" />
							</f:header>
							<f:content>
								<List items="{path: 'resources>/_raw/', sorter: {path: 'text'}}" showSeparators="None">
									<InputListItem
										label="{resources>text}"
										visible="{
											path: 'resources>',
											formatter: '.formatter.formatResourceCardVisibility'
										}">

										<Button
											type="Transparent"
											icon="sap-icon://action"
											accessibleRole="Link"
											tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
											press=".onButtonPress">
											<customData>
												<core:CustomData key="href" value="{resources>href}" />
											</customData>
										</Button>
									</InputListItem>
								</List>
							</f:content>
						</f:Card>
					</VBox>

					<VBox class="sapUiDemoKitResourcesAsideMobile" wrap="Wrap">
						<Panel class="sapUiDemoKitResourcesAsidePanel" expandable="true" headerText="{i18n>RESOURCES_ASIDE_CARD_TITLE}">
							<List showSeparators="None" items="{path: 'resources>/_raw/', sorter: {path: 'text'}}">
								<InputListItem
									label="{resources>text}"
									visible="{
										path: 'resources>',
										formatter: '.formatter.formatResourceCardVisibility'
									}">

									<Button
										type="Transparent"
										icon="sap-icon://action"
										accessibleRole="Link"
										tooltip="{i18n>RESOURCES_CARD_LINK_TOOLTIP}"
										press=".onButtonPress">
										<customData>
											<core:CustomData key="href" value="{resources>href}" />
										</customData>
									</Button>
								</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>