<mvc:View
		controllerName="sap.ui.documentation.sdk.controller.Tools"
		xmlns="sap.m"
		xmlns:f="sap.f"
		xmlns:mvc="sap.ui.core.mvc"
		xmlns:l="sap.ui.layout"
		xmlns:core="sap.ui.core"
		xmlns:custom="sap.ui.documentation"
		xmlns:html="http://www.w3.org/1999/xhtml">

	<Page showHeader="false"
		  class="sapUiNoContentPadding sapUiDemoApps">
		<landmarkInfo>
			<PageAccessibleLandmarkInfo
				contentRole="Main"
				contentLabel="Tools"/>
		</landmarkInfo>

		<Panel accessibleRole="Region" class="sapUiNoContentPadding" backgroundDesign="Transparent">
			<l:BlockLayout>
				<l:BlockLayoutRow>
					<l:BlockLayoutCell
							class="sapUiNoContentPadding sapUiDemokitLandingImageCell toolsImageCell">
						<Image
							id="phoneImage"
							src="./resources/sap/ui/documentation/sdk/images/Tools_S_cropped.jpg"
							width="100%"
							densityAware="false"
							class="landingImage"
							load="handleLandingImageLoad"
							visible="{device>/system/phone}"/>
						<Image
							src="./resources/sap/ui/documentation/sdk/images/Tools_M_and_L_cropped.jpg"
							width="100%"
							class="landingImage"
							densityAware="false"
							load="handleLandingImageLoad"
							visible="{=!${device>/system/phone}}"/>
						<Text id="landingImageHeadline"
							visible="false"
							class="sapUiDocumentationToolsHeaderText"
							text="Tools"
							width="100%"
							textAlign="Left"/>
					</l:BlockLayoutCell>
				</l:BlockLayoutRow>
			</l:BlockLayout>
		</Panel>
		<l:Grid defaultSpan="XL3 L4 M4 S12" class="toolpageResponsiveMargins">
			<!-- UI Theme Designer -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/uiThemeDesigner/text}"
										href="{/uiThemeDesigner/href}"
										target="_blank"
										wrapping="true"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_2_TEXT}" />
							<HBox wrap="Wrap">
								<html:div class="sapUIDisclaimerLink sapUiMediumMarginEnd">
									<Link text="{i18n>TOOLS_VIEW_DOC}"
										target="_blank"
										href="https://help.sap.com/viewer/09f6818d8e064537973102d6289e2aca/Cloud/en-US"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/ThemeDesigner.jpg" class="toolsPageImage" alt="{i18n>TOOLS_CARD_2_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Fiori tools -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/fioriTools/text}"
										href="{/fioriTools/href}"
										target="_blank"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_12_TEXT}" />
							<HBox wrap="Wrap">
								<html:div class="sapUIDisclaimerLink sapUiMediumMarginEnd">
									<Link text="{i18n>TOOLS_VIEW_DOC}"
										target="_blank"
										href="https://help.sap.com/viewer/17d50220bcd848aa854c9c182d65b699/Latest/en-US"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/FioriTools.png" class="toolsPageImage" alt="{i18n>TOOLS_CARD_12_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Business Application Studio -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/businessApplicationStudio/text}"
										href="{/businessApplicationStudio/href}"
										target="_blank"/>
								<Image
									src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
									tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
									width="1.25rem"
									press="onDisclaimerLinkPress"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_9_TEXT}" />
							<HBox wrap="Wrap">
								<html:div class="sapUIDisclaimerLink sapUiMediumMarginEnd">
									<Link text="{i18n>TOOLS_VIEW_DOC}"
											target="_blank"
											href="https://help.sap.com/viewer/product/SAP%20Business%20Application%20Studio/Cloud/en-US"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/BusinessApplicationStudio.jpg" class="toolsPageImage" alt="{i18n>TOOLS_CARD_9_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- UI5 Tooling -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/ui5Tooling/text}"
										href="{/ui5Tooling/href}"
										target="_blank"/>
								<Image
									src="./resources/sap/ui/documentation/sdk/images/link-external.png"
									tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
									width="1.25rem"
									press="onDisclaimerLinkPress"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_3_TEXT}" />
							<HBox wrap="Wrap">
								<html:div class="sapUIDisclaimerLink sapUiMediumMarginEnd">
									<Link text="{i18n>TOOLS_CARD_3_LINK_1}"
										target="_blank"
										href="https://github.com/SAP/ui5-tooling#ui5-build-and-development-tooling"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-external.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
								<html:div class="sapUIDisclaimerLink">
									<Link text="{i18n>TOOLS_CARD_3_LINK_2}"
										target="_blank"
										href="https://github.com/SAP/ui5-cli#cli-usage"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-external.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/UI5EvoTooling.jpg" class="toolsPageImage"  alt="{i18n>TOOLS_CARD_3_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- UI5 Inspector -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/ui5Inspector/text}"
										href="{/ui5Inspector/href}"
										target="_blank"/>
								<Image
									src="./resources/sap/ui/documentation/sdk/images/link-external.png"
									tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
									width="1.25rem"
									press="onDisclaimerLinkPress"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_4_TEXT}" />
							<HBox wrap="Wrap">
								<Link text="{i18n>TOOLS_VIEW_DOC}"
									class="sapUiMediumMarginEnd"
									target="_blank"
									href="{newWindowLinks>/inspectorHomeLink}"/>
								<html:div class="sapUIDisclaimerLink">
									<Link text="{i18n>TOOLS_CARD_4_LINK_1}"
										target="_blank"
										href="https://github.com/SAP/ui5-inspector"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-external.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_EXTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/UI5Inspector.jpg" class="toolsPageImage"  alt="{i18n>TOOLS_CARD_4_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Card Explorer -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<custom:TitleLink
									level="H1"
									titleStyle="H1"
									text="{/cardExplorer/text}"
									href="{/cardExplorer/href}"
									target="_blank"
									class="sapUiSmallMarginBottom"/>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_5_TEXT}" />
							<HBox wrap="Wrap">
								<Link text="{i18n>TOOLS_VIEW_DOC}"
								      target="_blank"
								      href="test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html"
								      class="sapUiMediumMarginEnd"/>
								<Link text="{i18n>TOOLS_CARD_5_LINK_1}"
								      target="_blank"
								      href="test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/explore/list"/>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/CardExplorer.jpg" class="toolsPageImage"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Support Assistant -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<custom:TitleLink
									level="H1"
									titleStyle="H1"
									text="{/supportAssistant/text}"
									class="sapUiSmallMarginBottom"
									href="{newWindowLinks>/supportAssistantHomeLink}"
									target="_blank"/>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_6_TEXT}" />
							<HBox wrap="Wrap">
								<Link text="{i18n>TOOLS_VIEW_DOC}"
									target="_blank"
									href="{newWindowLinks>/supportAssistantHomeLink}"/>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/SupportAssistant.jpg" class="toolsPageImage"  alt="{i18n>TOOLS_CARD_6_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Icon Explorer -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<custom:TitleLink
								level="H1"
								titleStyle="H1"
								text="{/iconExplorer/text}"
								href="{/iconExplorer/href}"
								target="_blank"
								class="sapUiSmallMarginBottom"/>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_7_TEXT}" />
							<HBox wrap="Wrap">
								<Link text="{i18n>TOOLS_VIEW_DOC}"
									target="_blank"
									href="{newWindowLinks>/iconExplorerHomeLink}"
									class="sapUiMediumMarginEnd"/>
								<Link text="{i18n>TOOLS_CARD_7_LINK_1}"
									target="_blank"
									href="test-resources/sap/m/demokit/iconExplorer/webapp/test/integration/opaTests1.qunit.html"
									class="sapUiMediumMarginEnd"/>
								<Link text="{i18n>TOOLS_CARD_7_LINK_2}"
									target="_blank"
									href="test-resources/sap/m/demokit/iconExplorer/webapp/test/unit/unitTests.qunit.html"/>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/IconExplorer.jpg" class="toolsPageImage"  alt="{i18n>TOOLS_CARD_7_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Theme Parameter Toolbox -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<custom:TitleLink
									level="H1"
									titleStyle="H1"
									text="{/themeParameterToolbox/text}"
									class="sapUiSmallMarginBottom"
									href="{/themeParameterToolbox/href}"
									target="_blank"/>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_8_TEXT}" />
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/ThemeParameterToolbox.jpg" class="toolsPageImage" alt="{i18n>TOOLS_CARD_8_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- UI5 Web Components -->
			<f:Card class="threeColumnLayoutCard">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/ui5WebComponents/text}"
										href="{/ui5WebComponents/href}"
										target="_blank"/>
								<Image
									src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
									tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
									width="1.25rem"
									press="onDisclaimerLinkPress"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_10_TEXT}" />
							<HBox wrap="Wrap">
								<html:div class="sapUIDisclaimerLink sapUiMediumMarginEnd">
									<Link text="{i18n>TOOLS_CARD_10_LINK_1}"
											target="_blank"
											href="https://sap.github.io/ui5-webcomponents/playground"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
								<html:div class="sapUIDisclaimerLink">
									<Link text="{i18n>TOOLS_CARD_10_LINK_2}"
											target="_blank"
											href="https://github.com/SAP/ui5-webcomponents"/>
									<Image
										src="./resources/sap/ui/documentation/sdk/images/link-sap.png"
										tooltip="{i18n>LEGAL_DISCLAIMER_INTERNAL_TOOLTIP}"
										width="1.25rem"
										press="onDisclaimerLinkPress"/>
								</html:div>
							</HBox>
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/UI5WebComponents.jpg" class="toolsPageImage" alt="{i18n>TOOLS_CARD_10_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Live Editor -->
			<f:Card class="threeColumnLayoutCard"
				visible="{
					path: '/liveEditor',
					formatter: '.formatter.formatToolCardVisibility'}">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/liveEditor/text}"
										href="{/liveEditor/href}"
										target="_blank"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_13_TEXT}" />
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/Tools_LiveEditor.jpg" class="toolsPageImage" alt="{i18n>TOOLS_CARD_13_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Flexible Programming Model Explorer -->
			<f:Card class="threeColumnLayoutCard"
				visible="{
						path: '/flexibleProgrammingModelExplorer',
						formatter: '.formatter.formatToolCardVisibility'}">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/flexibleProgrammingModelExplorer/text}"
										href="{/flexibleProgrammingModelExplorer/href}"
										target="_blank"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_14_TEXT}" />
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/FlexibleProgrammingModelExplorer.jpg" class="toolsPageImage" alt="{i18n>TOOLS_CARD_14_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
			<!-- Accessibility Guide -->
			<f:Card class="threeColumnLayoutCard"
				visible="{
							path: '/accessibilityGuide',
							formatter: '.formatter.formatToolCardVisibility'}">
				<f:content>
					<VBox justifyContent="SpaceBetween">
						<VBox class="sapUiSmallMargin toolspageCardInfo">
							<html:div class="sapUIDisclaimerLink sapUiSmallMarginBottom">
								<custom:TitleLink
										level="H1"
										titleStyle="H1"
										text="{/accessibilityGuide/text}"
										href="{/accessibilityGuide/href}"
										target="_blank"/>
							</html:div>
							<Text class="sapUiSmallMarginBottom" text="{i18n>TOOLS_CARD_15_TEXT}" />
						</VBox>
						<Image src="./resources/sap/ui/documentation/sdk/images/tools/AccessibilityGuide.png" class="toolsPageImage" alt="{i18n>TOOLS_CARD_15_IMG_ALT}"/>
					</VBox>
				</f:content>
			</f:Card>
		</l:Grid>
		<l:BlockLayout>
			<l:BlockLayoutRow>
				<core:Fragment id="footerFragment" fragmentName="sap.ui.documentation.sdk.view.Footer" type="XML" />
			</l:BlockLayoutRow>
		</l:BlockLayout>
	</Page>
</mvc:View>
