<mvc:View
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:f="sap.f"
    xmlns:l="sap.ui.layout"
    xmlns:grid="sap.ui.layout.cssgrid"
    controllerName="sap.ushell.components.contentFinder.controller.AppSearch"
    id="contentFinderAppSearchView"
    height="100%">
    <!-- The container needs any fixed height (e.g. minFlexSize="1px") to calculate the content
    heights. -->
    <l:FixFlex
        id="contentFinderAppSearchLayout"
        minFlexSize="1px">
        <l:fixContent>
            <OverflowToolbar
                id="appSearchOverflowToolbar"
                asyncMode="false"
                style="Clear"
                class="contentFinderToolbar sapUiMediumMargin">
                <Title
                    id="appBoxContainerTitle"
                    titleStyle="H5"
                    text="{
                    parts: [
                        '/activeNavigationTarget',
                        '/appSearch/searchTerm',
                        '/appSearch/showSelectedPressed',
                        '/appSearch/selectedAppCount',
                        '/appSearch/visualizations/tiles',
                        '/appSearch/visualizations/cards',
                        '/appSearch/restrictedVisualizations',
                        '/appSearch/filteredAppCount',
                        '/appSearch/totalCount'
                    ], formatter: '.formatter.formatAppSearchTitle' }">
                    <layoutData>
                        <OverflowToolbarLayoutData
                            minWidth="6rem"
                            shrinkable="true"
                            priority="High" />
                    </layoutData>
                </Title>
                <ToolbarSpacer />

                <!-- Add 'search=".onSearch"' for server side searching -->
                <SearchField
                    id="appSearchField"
                    value="{/appSearch/searchTerm}"
                    placeholder="{i18n>ContentFinder.AppSearch.SearchPlaceholder}"
                    search=".onSearch">
                    <layoutData>
                        <OverflowToolbarLayoutData
                            minWidth="6rem"
                            maxWidth="13.75rem"
                            shrinkable="true"
                            priority="NeverOverflow" />
                    </layoutData>
                </SearchField>
                <ToggleButton
                    id="showAllSelectedBtn"
                    visible="{= ${/activeNavigationTarget} === ${/navigationTargets/appSearchTiles}}"
                    pressed="{/appSearch/showSelectedPressed}"
                    enabled="{= ${/appSearch/selectedAppCount} > 0 || ${/appSearch/showSelectedPressed} }"
                    icon="sap-icon://multi-select"
                    tooltip="{i18n>ContentFinder.AppSearch.Button.Tooltip.ShowSelected}"
                    press=".onShowSelectedPressed">
                    <layoutData>
                        <OverflowToolbarLayoutData
                            shrinkable="false"
                            priority="Low" />
                    </layoutData>
                </ToggleButton>
            </OverflowToolbar>
        </l:fixContent>
        <l:flexContent>
            <Page
                id="contentPage"
                showHeader="false"
                class="sapUiResponsiveContentPadding"
                busy="{= !${/appSearch/visualizationsLoaded}}">
                <f:GridList
                    id="tiles"
                    includeItemInSelection="true"
                    mode="MultiSelect"
                    growing="true"
                    growingScrollToLoad="true"
                    growingThreshold="{/appSearch/growingThreshold}"
                    updateStarted=".onUpdateStarted"
                    items="{/appSearch/visualizations/tiles}"
                    selectionChange=".onAppBoxSelected"
                    visible="{= ${/activeNavigationTarget} === ${/navigationTargets/appSearchTiles}}">
                    <f:customLayout>
                        <grid:GridResponsiveLayout containerQuery="true">
                            <grid:layout>
                                <grid:GridSettings
                                    gridTemplateColumns="repeat(auto-fill, 19.0625rem)"
                                    gridAutoRows="12.75rem"
                                    gridGap="1rem" />
                            </grid:layout>
                        </grid:GridResponsiveLayout>
                    </f:customLayout>
                    <core:Fragment
                        id="tilesBox"
                        fragmentName="sap.ushell.components.contentFinder.view.AppSearchBox"
                        type="XML" />
                </f:GridList>
                <f:GridList
                    id="cards"
                    includeItemInSelection="true"
                    mode="SingleSelectMaster"
                    growing="true"
                    growingScrollToLoad="true"
                    growingThreshold="{/appSearch/growingThreshold}"
                    updateStarted=".onUpdateStarted"
                    items="{/appSearch/visualizations/cards}"
                    selectionChange=".onAppBoxSelectedAndClose"
                    visible="{= ${/activeNavigationTarget} === ${/navigationTargets/appSearchCards}}">
                    <f:customLayout>
                        <grid:GridResponsiveLayout containerQuery="true">
                            <grid:layout>
                                <grid:GridSettings
                                    gridTemplateColumns="repeat(auto-fill, 19.0625rem)"
                                    gridAutoRows="12.75rem"
                                    gridGap="1rem" />
                            </grid:layout>
                        </grid:GridResponsiveLayout>
                    </f:customLayout>
                    <core:Fragment
                        id="cardsBox"
                        fragmentName="sap.ushell.components.contentFinder.view.AppSearchBox"
                        type="XML" />
                </f:GridList>
            </Page>
        </l:flexContent>
    </l:FixFlex>
</mvc:View>
