<Panel
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:dnd="sap.ui.core.dnd"
    height="100%"
    accessibleRole="Region"
    backgroundDesign="Transparent"
    class="sapUiNoContentPadding"
    id="tileSelector">
    <customData>
        <core:CustomData key="help-id" value="FLPPage-manage-TileSelector-Panel-TileSelector" writeToDom="true"/>
    </customData>
    <layoutData><FlexItemData growFactor="1" /></layoutData> <!-- workaround for fragment used inside of a flex container -->
    <headerToolbar>
        <OverflowToolbar id="tileSelectorToolbar" height="3rem" design="Transparent">
            <SearchField
                id="tileSelectorSearchField"
                showRefreshButton="false"
                width="auto"
                search=".TileSelector.onSearchTiles"
                value="{/searchText}"
                tooltip="{i18n>Tooltip.SearchForTiles}"
                placeholder="{i18n>Placeholder.SearchForTiles}" />
            <ToolbarSpacer />
            <Button
                id="tileSelectorAddButton"
                type="Transparent"
                press=".TileSelector.onAddTiles"
                text="{i18n>Button.Add}" >
                <customData>
                    <core:CustomData key="help-id" value="FLPPage-manage-TileSelector-Button-Add" writeToDom="true"/>
                </customData>
            </Button>
            <OverflowToolbarButton
                id="tileSelectorSortButton"
                icon="sap-icon://sort"
                press=".TileSelector.onSortCatalogsToggle"
                text="{i18n>Button.SortCatalogs}"
                tooltip="{i18n>Button.SortCatalogs}" />
            <OverflowToolbarButton
                id="tileSelectorCollapseButton"
                icon="sap-icon://collapse-all"
                press=".TileSelector.onCollapseAllCatalogs"
                text="{i18n>Button.CollapseCatalogs}"
                tooltip="{i18n>Button.CollapseCatalogs}" />
            <OverflowToolbarButton
                id="tileSelectorExpandButton"
                icon="sap-icon://expand-all"
                press=".TileSelector.onExpandAllCatalogs"
                text="{i18n>Button.ExpandCatalogs}"
                tooltip="{i18n>Button.ExpandCatalogs}" />
        </OverflowToolbar>
    </headerToolbar>
    <content>
        <Tree
            id="tileSelectorList"
            mode="MultiSelect"
            modeAnimationOn="false"
            itemPress=".TileSelector.onCatalogItemPress"
            items="{ path: 'catalogs>/catalogs', key: 'vizId' }"
            noDataText="{i18n>Message.NoTiles}">
            <items>
                <CustomTreeItem
                    id="tileSelectorCustomTreeItem"
                    class="sapUshellTileSelectorListItem"
                    type="{=!!${catalogs>catalogTitle} ? 'Active' : 'Inactive'}"> <!-- only catalogs should fire "onCatalogItemPress" -->
                    <FlexBox id="tileSelectorFlexBox" class="sapUiTinyMargin" width="100%">
                        <items>
                            <HBox id="tileSelectorHbox1" alignItems="Center" width="100%">
                                <!-- TODO: do not display tile icon until specification is ready -->
                                <!-- <core:Icon visible="{=!${catalogs>catalogTitle}}" src="{catalogs>iconUrl}" size="1.5rem" width="1.5rem" class="sapUiSmallMarginBeginEnd" /> -->
                                <VBox width="0" id="tileSelectorVbox1">
                                    <layoutData><FlexItemData growFactor="1" /></layoutData>
                                    <Title id="tileSelectorCatalogTitle" visible="{= !!${catalogs>catalogTitle}}" text="{catalogs>catalogTitle}" wrapping="true" />
                                    <Title id="tileSelectorTitle" visible="{= !!${catalogs>title}}" text="{catalogs>title}" wrapping="true" />
                                    <Text id="tileSelectorSubTitle" visible="{= !!${catalogs>subTitle}}" text="{catalogs>subTitle}" />
                                    <VBox id="tileSelectorSemanticActionWrapper" class="sapUiSmallMarginBegin">
                                        <Text id="tileSelectorSemanticAction" visible="{= !!${catalogs>semanticObject} &amp;&amp; !!${catalogs>semanticAction} }"
                                            text="{= '#' + ${catalogs>semanticObject} + '-' + ${catalogs>semanticAction} }"
                                            class="sapUiTinyMarginTop" />
                                        <Text id="tileSelectorFioriId" visible="{= !!${catalogs>fioriId}}" text="{catalogs>fioriId}" class="sapUiTinyMarginTop" />
                                        <Text id="tileSelectorAppDetail" visible="{= !!${catalogs>appDetail}}" text="{catalogs>appDetail}" class="sapUiTinyMarginTop" />
                                    </VBox>
                                </VBox>
                                <VBox id="tileSelectorTileTypeWrapper" alignItems="Center" alignContent="Center" class="sapUiSmallMarginBegin">
                                    <Text id="tileSelectorAppText" visible="{= !!${catalogs>appType}}" text="{catalogs>appType}" class="sapUiTinyMarginTopBottom" />
                                    <Text
                                        id="tileSelectorTileType"
                                        visible="{= !!${catalogs>tileType}}"
                                        text="{
                                            path: 'catalogs>tileType',
                                            formatter: '.TileSelector.formatTileType'
                                        }"
                                        class="sapUiTinyMarginTopBottom" />
                                    <HBox id="tileSelectorDeviceWrapper" visible="{= !${catalogs>catalogTitle}}" alignItems="Center" justifyContent="SpaceAround">
                                        <layoutData><FlexItemData alignSelf="Stretch" /></layoutData>
                                        <core:Icon
                                            id="tileSelectorIconDesktop"
                                            visible="{= ${catalogs>deviceDesktop}}"
                                            src="sap-icon://laptop"
                                            tooltip="{i18n>Tooltip.Desktop}"
                                            class="sapUiTinyMarginTopBottom" />
                                        <core:Icon
                                            id="tileSelectorIconTablet"
                                            visible="{= ${catalogs>deviceTablet}}"
                                            src="sap-icon://ipad-2"
                                            class="sapUiTinyMarginTopBottom" />
                                        <core:Icon
                                            id="tileSelectorIconPhone"
                                            visible="{= ${catalogs>devicePhone}}"
                                            src="sap-icon://iphone"
                                            class="sapUiTinyMarginTopBottom" />
                                    </HBox>
                                </VBox>
                                <Button
                                    id="tileSelectorButtonAdd"
                                    visible="{= !${catalogs>catalogTitle}}"
                                    type="Transparent"
                                    press=".TileSelector.onAddTiles"
                                    text="{i18n>Button.Add}"
                                    class="sapUiSmallMarginBegin" />
                            </HBox>
                        </items>
                    </FlexBox>
                </CustomTreeItem>
            </items>
            <dragDropConfig>
                <dnd:DragInfo
                    groupName="Section"
                    sourceAggregation="items"
                    dragStart=".TileSelector.onDragStart" />
            </dragDropConfig>
        </Tree>
    </content>
</Panel>
