<mvc:View
	controllerName="sap.ui.demo.iconexplorer.controller.Home"
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
	xmlns:core="sap.ui.core"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:custom="sap.ui.demo.iconexplorer.controls">
	<Page
		showHeader="false"
		id="page"
		class="IconExplorerHomeBackground">
		<landmarkInfo>
			<PageAccessibleLandmarkInfo
				contentRole="Region"
				contentLabel="{i18n>Home_contentLabel}"/>
		</landmarkInfo>
		<l:BlockLayout class="BlockLayoutFlex">
			<l:BlockLayoutRow>
				<l:BlockLayoutCell class="sapUiNoContentPadding sapUiResponsiveContentPadding">
					<l:VerticalLayout
						width="100%"
						class="sapUiLargeMarginTopBottom">
						<Text
							class="HomeHeaderText sapUiTinyMarginTop sapUiSmallMarginBottom"
							text="{i18n>iconExplorerTitle}"
							width="100%"
							textAlign="Center"/>
						<HBox justifyContent="Center">
							<Input
								class="sapUiLargeMarginTop sapContrastPlus sapContrast sapUiMediumMarginBottom"
								id="search"
								placeholder="{i18n>searchPlaceholder}"
								type="Text"
								showSuggestion="true"
								showClearIcon="true"
								showValueHelp="true"
								submit=".onEnter"
								showTableSuggestionValueHelp="false"
								suggestionRows="{
									path: '/AllIcons'
								}"
								suggestionItemSelected=".onSuggestionSelect"
								valueLiveUpdate="true"
								startSuggestion="2"
								liveChange=".onSearch">
								<layoutData>
									<FlexItemData growFactor="0.7" />
								</layoutData>
								<suggestionColumns>
									<Column
										hAlign="Begin"
										popinDisplay="Inline"
										demandPopin="true"
										width="2em">
										<Label text="{i18n>SuggestionIconColumn}"/>
									</Column>
									<Column
										hAlign="Begin"
										vAlign="Middle"
										popinDisplay="Inline"
										demandPopin="true">
										<Label text="{i18n>SuggestionNameColumn}"/>
									</Column>
									<Column
										id="tagsColumn"
										minScreenWidth="Desktop"
										vAlign="Middle"
										demandPopin="false">
										<Text
											id="tagsColumnTitle"
											text="{i18n>tableTagsColumnTitle}"/>
									</Column>
									<Column
										hAlign="Begin"
										vAlign="Middle"
										popinDisplay="Inline"
										demandPopin="true">
										<Label text="{i18n>SuggestionResourceColumn}"/>
									</Column>
									<Column
										demandPopin="false"
										minScreenWidth="Tablet"
										hAlign="Begin"
										vAlign="Middle"
										popinDisplay="Inline">
										<Label text="{i18n>SuggestionAvailabilityColumn}"/>
									</Column>
								</suggestionColumns>
								<suggestionRows>
									<ColumnListItem type="Navigation">
										<cells>
											<core:Icon
												size="1.2rem"
												src="sap-icon://{iconPath}{name}"
												color="Default"/>
											<Label text="{name}"/>
											<l:HorizontalLayout
												content="{
													path: 'tags',
													templateShareable: true
												}">
												<Token
													text="{name}"
													select=".onTagSelect"
													editable="false"/>
											</l:HorizontalLayout>
											<Label text="{font}"/>
											<ObjectNumber
												number="{path: 'delivery'}"
												state="{
													path: 'delivery',
													formatter: '.formatter.deliveryState'
												}"/>
										</cells>
									</ColumnListItem>
								</suggestionRows>
							</Input>
						</HBox>
					</l:VerticalLayout>
				</l:BlockLayoutCell>
			</l:BlockLayoutRow>
			<l:BlockLayoutRow>
				<l:BlockLayoutCell
					backgroundColorSet="ColorSet6"
					backgroundColorShade="ShadeA"
					visible="{= ${/AllFontsLoaded/SAP-icons}}">
					<l:VerticalLayout>
						<core:Icon
							size="3rem"
							src="sap-icon://sap-ui5"
							class="sapUiSmallMarginBottom sapUiSmallMarginTop">
						</core:Icon>
						<custom:TitleLink
							press=".onTitleLinkPress"
							text="{i18n>fontName_SAPIcons}"
							titleStyle="H2"
							target="_blank">
							<custom:customData>
								<core:CustomData key="font" value="SAP-icons"/>
							</custom:customData>
						</custom:TitleLink>
						<Text
							text="{i18n>sapIconsDescription}"
							class="sapUiTinyMarginTop sapUiLargeMarginEnd"/>
						<Label
							text="{i18n>iconNamespace}"
							class="sapUiSmallMarginTop "/>
						<Text
							text="sap-icon://"
							class="sapUiMediumMarginBottom"/>
					</l:VerticalLayout>
				</l:BlockLayoutCell>
				<l:BlockLayoutCell
					backgroundColorSet="ColorSet6"
					backgroundColorShade="ShadeB"
					visible="{= ${/AllFontsLoaded/SAP-icons-TNT}}">
					<l:VerticalLayout>
						<core:Icon
							size="3rem"
							src="sap-icon://SAP-icons-TNT/code1"
							class="sapUiSmallMarginBottom sapUiSmallMarginTop">
						</core:Icon>
						<custom:TitleLink
							press=".onTitleLinkPress"
							text="{i18n>fontName_SAPIconsTNT}"
							titleStyle="H2"
							target="_blank">
							<custom:customData>
								<core:CustomData key="font" value="SAP-icons-TNT"/>
							</custom:customData>
						</custom:TitleLink>
						<Text
							text="{i18n>technologyAppIconsDescription}"
							class="sapUiTinyMarginTop sapUiLargeMarginEnd"/>
						<Label
							text="{i18n>iconNamespace}"
							class="sapUiSmallMarginTop "/>
						<Text
							text="sap-icon://SAP-icons-TNT"
							class=" sapUiMediumMarginBottom "/>
					</l:VerticalLayout>
				</l:BlockLayoutCell>
				<l:BlockLayoutCell
					visible="{= ${/AllFontsLoaded/BusinessSuiteInAppSymbols} &amp;&amp; !${version>/isOpenUI5}}"
					backgroundColorSet="ColorSet6"
					backgroundColorShade="ShadeC"
					class="BlockLayoutCellHeight">
					<l:VerticalLayout>
						<core:Icon
							size="3rem"
							src="sap-icon://BusinessSuiteInAppSymbols/icon-display-ads"
							class="sapUiSmallMarginBottom sapUiSmallMarginTop">
						</core:Icon>
						<custom:TitleLink
							press=".onTitleLinkPress"
							text="{i18n>fontName_BusinessSuiteInAppSymbols}"
							titleStyle="H2"
							target="_blank">
							<custom:customData>
								<core:CustomData key="font" value="BusinessSuiteInAppSymbols"/>
							</custom:customData>
						</custom:TitleLink>
						<Text
							text="{i18n>fioriAppIconsDescription}"
							class="sapUiTinyMarginTop sapUiLargeMarginEnd"/>
						<Label
							text="{i18n>iconNamespace}"
							class="sapUiSmallMarginTop "/>
						<Text
							text="sap-icon://BusinessSuiteInAppSymbols"
							class=" sapUiMediumMarginBottom "/>
					</l:VerticalLayout>
				</l:BlockLayoutCell>
				<l:BlockLayoutCell
					backgroundColorSet="ColorSet6"
					backgroundColorShade="ShadeD">
					<l:VerticalLayout>
						<core:Icon
							size="3rem"
							src="sap-icon://course-book"
							class="sapUiSmallMarginBottom sapUiSmallMarginTop">
						</core:Icon>
						<custom:TitleLink
							text="{i18n>sapIconGuidelines}"
							href="https://experience.sap.com/fiori-design-web/icons/"
							titleStyle="H2"
							target="_blank"/>
						<Text
							text="{i18n>sapIconGuidelinesDescription}"
							class="sapUiTinyMarginTop sapUiLargeMarginEnd"/>
						<Link
							text="{i18n>developmentDocumentation}"
							target="_blank"
							href="https://sdk.openui5.org/topic/21ea0ea94614480d9a910b2e93431291"
							class="sapUiSmallMarginTop"/>
						<Link
							text="{i18n>SAPFioriDesignGuidelines}"
							href="https://experience.sap.com/fiori-design-web/icons/"
							class="sapUiMediumMarginBottom"/>
					</l:VerticalLayout>
				</l:BlockLayoutCell>
			</l:BlockLayoutRow>
			<l:BlockLayoutRow class="BlockLayoutFooter IconExplorerHomeBackground">
				<l:BlockLayoutCell>
				</l:BlockLayoutCell>
			</l:BlockLayoutRow>
		</l:BlockLayout>
	</Page>
</mvc:View>
