<mvc:View
	controllerName="sap.ui.demo.iconexplorer.controller.Overview"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:l="sap.ui.layout"
	xmlns:core="sap.ui.core"
	xmlns:f="sap.f"
	busy="{view>/busy}">
	<Page
		id="page"
		showFooter="false"
		class="sapContrast">
		<landmarkInfo>
			<PageAccessibleLandmarkInfo
				rootRole="Region"
				rootLabel="{i18n>Overview_rootLabel}"
				contentRole="Main"
				contentLabel="{i18n>Overview_contentLabel}"
				headerRole="Banner"
				headerLabel="{i18n>Overview_headerLabel}"/>
		</landmarkInfo>
		<customHeader>
			<Toolbar>
				<Button
					type="Back"
					id="buttonNavigateBack"
					press=".onNavBack"/>
				<ToolbarSpacer/>
				<Button
					id="fontSelector"
					text="{
						path: 'view>/fontName',
						formatter: '.formatter.fontName'
					}"
					type="Transparent"
					icon="sap-icon://slim-arrow-down"
					iconFirst="false"
					press=".onSelectFont"/>
				<ToolbarSpacer/>
				<Button
					id="surprise"
					visible="{= ${device>/system/phone} ? false : true}"
					tooltip="{i18n>overviewRandomIconButtonTooltip}"
					icon="sap-icon://activate"
					press=".onSurpriseMe"
					ariaLabelledBy="labelRandomButton"/>
				<Button
					id="download"
					visible="{= ${device>/system/phone} ? false : true}"
					tooltip="{i18n>overviewDownloadButtonTooltip}"
					icon="sap-icon://download"
					press=".onDownload"
					ariaLabelledBy="labelDownloadButton"/>
			</Toolbar>
		</customHeader>
		<content>
			<!-- Invisible Texts for ARIA -->
			<core:InvisibleText id="labelCopyButton" text="{i18n>labelCopyButton}"/>
			<core:InvisibleText id="labelPreviewButton" text="{i18n>labelPreviewButton}"/>
			<core:InvisibleText id="labelRandomButton" text="{i18n>labelRandomButton}"/>
			<core:InvisibleText id="labelDownloadButton" text="{i18n>labelDownloadButton}"/>
			<core:InvisibleText id="labelTags" text="{i18n>overviewTagSelectionLabel}"/>
			<core:InvisibleText id="labelIconSearch" text="{i18n>labelIconSearch}"/>
			<core:InvisibleText id="labelCategory" text="{i18n>labelCategory}"/>
			<!-- -->
			<IconTabBar
				id="iconTabBar"
				select=".onTabSelect"
				stretchContentHeight="true"
				expandable="false"
				backgroundDesign="Solid"
				class="sapUiNoContentPadding">
				<items>
					<IconTabFilter
						showAll="true"
						count="{view>/iconFilterCount}"
						text="{i18n>overviewTabAllText}"
						key="all"/>
					<IconTabSeparator/>
					<IconTabFilter
						icon="sap-icon://grid"
						text="{i18n>overviewTabGridText}"
						key="grid"/>
					<IconTabFilter
						icon="sap-icon://list"
						text="{i18n>overviewTabDetailsText}"
						key="details"/>
					<IconTabFilter
						icon="sap-icon://palette"
						text="{i18n>overviewTabVisualText}"
						key="visual"/>
					<IconTabFilter
						icon="sap-icon://favorite-list"
						text="{i18n>overviewTabFavoritesText}"
						key="favorites"/>
				</items>
				<content>
					<l:ResponsiveSplitter
						id="splitter"
						defaultPane="default">
						<l:PaneContainer>
							<l:SplitPane
								requiredParentWidth="400"
								id="default">
								<ScrollContainer
									vertical="true"
									horizontal="false"
									height="100%">
									<Panel
										accessibleRole="Region">
									<FlexBox
										width="auto"
										class="sapUiSmallMargin sapUiNoMarginBottom"
										alignItems="Stretch"
										renderType="Bare">
										<items>
											<SearchField
												id="searchField"
												liveChange=".onSearch"
												class="sapUiTinyMarginEnd"
												tooltip="{i18n>searchPlaceholder}"
												width="auto"
												ariaLabelledBy="labelIconSearch">
												<layoutData>
													<FlexItemData growFactor="1"/>
												</layoutData>
											</SearchField>
											<ComboBox
												id="categorySelection"
												items="{groups}"
												class=" sapUiTinyMarginEnd"
												tooltip="{i18n>overviewSelectCategoryTooltip}"
												selectionChange=".onSelectCategory"
												visible="{= ${device>/system/phone} ? false : true}"
												ariaLabelledBy="labelCategory"
												width="auto">
												<layoutData>
													<FlexItemData growFactor="1"/>
												</layoutData>
												<core:Item
													key="{name}"
													text="{text}"/>
											</ComboBox>
										</items>
									</FlexBox>
									<OverflowToolbar
										id="tagSelection"
										visible="{= ${view>/iconFilterCount} !== 0 &amp;&amp; (${device>/system/phone} ? false : true)}"
										width="auto"
										design="Transparent"
										content="{
											path: 'groups/0/tags',
											factory: '._tagSelectionFactory',
											length: 50
										}">
									</OverflowToolbar>
								</Panel>
								<Panel
									id="resultContainer"
									accessibleRole="Region">
								</Panel>
								</ScrollContainer>
							</l:SplitPane>
							<l:SplitPane requiredParentWidth="800">
								<ScrollContainer
									id="preview"
									visible="false">
									<layoutData>
										<l:SplitterLayoutData size="350px"/>
									</layoutData>
									<l:VerticalLayout
										width="100%"
										class="sapUiContentPadding">
										<Panel
											id="previewCopy"
											headerText="{i18n>previewCopyTitle}"
											accessibleRole="Region">
											<HBox>
												<Input
													id="previewCopyCode"
													editable="false"
													value="sap-icon://{view>/iconPath}{name}">
													<layoutData>
														<FlexItemData growFactor="1" />
													</layoutData>
												</Input>
												<Button
													icon="sap-icon://copy"
													type="Emphasized"
													tooltip="{i18n>previewCopyIconToClipboard}"
													press=".onCopyCodeToClipboard"
													class="sapUiTinyMarginBegin"
													ariaLabelledBy="labelCopyButton"/>
											</HBox>
											<HBox>
												<Input
													id="previewCopyIcon"
													editable="false"
													value="{view>/iconPath}{name} {i18n>overviewSymbolText}">
													<layoutData>
														<FlexItemData growFactor="1" />
													</layoutData>
												</Input>
												<Button
													icon="sap-icon://copy"
													type="Emphasized"
													tooltip="{i18n>previewCopyIconToClipboard}"
													press=".onCopyIconToClipboard"
													class="sapUiTinyMarginBegin"
													ariaLabelledBy="labelCopyButton"/>
											</HBox>
											<HBox>
												<Input
													id="previewCopyUnicode"
													editable="false"
													value="{
														path: 'name',
														formatter: '.formatter.getUnicodeTextByName'}">
													<layoutData>
														<FlexItemData growFactor="1" />
													</layoutData>
												</Input>
												<Button
													icon="sap-icon://copy"
													type="Emphasized"
													tooltip="{i18n>previewCopyIconToClipboard}"
													press=".onCopyUnicodeToClipboard"
													class="sapUiTinyMarginBegin"
													ariaLabelledBy="labelCopyButton"/>
											</HBox>
										</Panel>
										<Panel
										headerText="{i18n>previewIconTitle}"
										accessibleRole="Region"
										backgroundDesign="Solid"
										class="sapUiContentPadding">
											<l:BlockLayout
													background="Accent">
												<l:BlockLayoutRow rowColorSet="ColorSet4">
													<l:BlockLayoutCell>
														<HBox justifyContent="Center">
															<core:Icon
																id="previewIcon"
																size="5rem"
																src="sap-icon://{view>/iconPath}{name}"/>
														</HBox>
													</l:BlockLayoutCell>
												</l:BlockLayoutRow>
											</l:BlockLayout>
										</Panel>
										<Panel
											id="previewUseCases"
											headerText="{i18n>previewUseCasesTitle}"
											accessibleRole="Region">
											<l:BlockLayout
												id="useCaseLayout"
												background="Light">
												<l:BlockLayoutRow>
												<l:BlockLayoutCell>
													<HBox justifyContent="SpaceAround">
														<!-- Preview for only icon buttons -->
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															class="sapUiTinyMarginEnd"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															type="Accept"
															class="sapUiTinyMarginEnd"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															type="Reject"
															class="sapUiTinyMarginEnd"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															type="Emphasized"
															class="sapUiTinyMarginEnd"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														</HBox>
												</l:BlockLayoutCell>
												<l:BlockLayoutCell>
													<!-- Preview for only icon buttons in Toolbar -->
													<OverflowToolbar
														id="previewToolbar"
														design="Solid"
														class="sapContrast sapContrastPlus">
														<GenericTag
															text="{i18n>previewIconButtonText}"/>
														<ToolbarSpacer/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															type="Accept"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															type="Reject"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
														<Button
															icon="sap-icon://{view>/iconPath}{name}"
															type="Emphasized"
															tooltip="{i18n>previewIconButton}"
															ariaLabelledBy="labelPreviewButton"/>
													</OverflowToolbar>
												</l:BlockLayoutCell>
											</l:BlockLayoutRow>
											<l:BlockLayoutRow>
												<l:BlockLayoutCell>
													<StandardListItem
														id="previewListItem"
														title="{i18n>listItemText}"
														description="sap-icon://{view>/iconPath}{name}"
														icon="sap-icon://{view>/iconPath}{name}"
														infoState="Warning"
														highlight="Warning"/>
												</l:BlockLayoutCell>
												<l:BlockLayoutCell>
													<IconTabBar
														id="previewIconTabBar"
														expanded="true"
														expandable="false"
														headerBackgroundDesign="Solid"
														selectedKey="1"
														class="sapUiNoContentPadding semiTransparentITB">
														<items>
															<IconTabFilter
																icon="sap-icon://{view>/iconPath}{name}"
																key="1"/>
															<IconTabFilter
																icon="sap-icon://{view>/iconPath}{name}"
																key="2"
																iconColor="Positive"/>
															<IconTabFilter
																icon="sap-icon://{view>/iconPath}{name}"
																key="3"
																iconColor="Critical"/>
															<IconTabFilter
																icon="sap-icon://{view>/iconPath}{name}"
																key="4"
																iconColor="Negative"/>
														</items>
														<content>
															<GenericTag
																text="{i18n>previewIconTabBarText}"
																class="sapUiTinyMargin"/>
														</content>
													</IconTabBar>
												</l:BlockLayoutCell>
											</l:BlockLayoutRow>
											<l:BlockLayoutRow>
												<l:BlockLayoutCell>
													<GenericTile
														id="previewGenericTile"
														header="GenericTile"
														subheader="with Icon">
														<tileContent>
															<TileContent footer="Footer">
																<content>
																	<NumericContent
																		value="42"
																		scale="EUR"
																		valueColor="Neutral"
																		indicator="Up"
																		state="Loaded"
																		icon="sap-icon://{view>/iconPath}{name}"/>
																</content>
															</TileContent>
														</tileContent>
													</GenericTile>
												</l:BlockLayoutCell>
												<l:BlockLayoutCell>
													<VBox
													alignItems="Center"
													height="100%"
													justifyContent="Center">
														<f:Avatar
															src="sap-icon://{view>/iconPath}{name}"
															displaySize="L"/>
														<Text
															width="100%"
															class="sapUiTinyMarginTop"
															textAlign="Center"
															text="{i18n>avatarText}"/>
													</VBox>
												</l:BlockLayoutCell>
											</l:BlockLayoutRow>
										</l:BlockLayout>
									</Panel>
									<Panel
										id="previewInfo"
										accessibleRole="Region"
										headerText="{i18n>previewInfoTitle}">
										<ObjectAttribute
											id="unicodeInfo"
											title="{i18n>previewInfoUnicode}"
											text="?"/>
										<ObjectAttribute
											title="{i18n>previewInfoCSSClass}"
											text="icon-{name}"/>
										<ObjectAttribute
											id="categoryInfo"
											title="{i18n>previewInfoCategory}"
											text="?"/>
										<ObjectAttribute title="{i18n>previewInfoTag}"/>
										<Tokenizer
											width="100%"
											tokens="{
												path: 'tags',
												templateShareable: true
											}"
											renderMode="Narrow"
											editable="false">
											<Token
												text="{name}"
												press=".onTagSelect"/>
										</Tokenizer>
									</Panel>
									</l:VerticalLayout>
							</ScrollContainer>
						</l:SplitPane>
					</l:PaneContainer>
				</l:ResponsiveSplitter>
				</content>
			</IconTabBar>
		</content>
		<dependents>
			<Popover
				placement="Bottom"
				id="selectFont"
				showHeader="false">
				<List
					id="selectFontList"
					selectionChange=".onChangeFont"
					mode="SingleSelectMaster"
					items="{
						path: '/AllFonts',
						sorter: {
							path: 'name',
							descending: false
						}
					}">
					<StandardListItem
						title="{
							path: 'name',
							formatter: '.formatter.fontName'
						}">
						<customData>
							<core:CustomData key="font" value="{name}"/>
						</customData>
					</StandardListItem>
				</List>
			</Popover>
		</dependents>
	</Page>
</mvc:View>
