<mvc:View
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:core="sap.ui.core"
    xmlns:l="sap.ui.layout"
    xmlns:cssgrid="sap.ui.layout.cssgrid"
    xmlns:f="sap.f"
    controllerName="sap.ushell.components.contentFinder.controller.WidgetGallery"
    id="contentFinderWidgetGallery"
    height="100%">
    <VBox
        id="widgetGroups"
        items="{path: '/widgetGallery/widgetGroups'}"
        class="sapUiMediumMargin">
        <VBox
            id="widgetGroup"
            class="sapUiTinyMarginBottom">
            <OverflowToolbar
                id="widgetGroupToolbar"
                asyncMode="true"
                style="Clear"
                class="contentFinderToolbar"
                visible="{= !!${title}}">
                <Title
                    id="title"
                    titleStyle="H6"
                    text="{title}" />
            </OverflowToolbar>
            <f:GridList
                id="contentFinderWidgets"
                mode="None"
                items="{
                            path: 'widgets',
                            templateShareable: false,
                            key: 'id'
                        }">
                <f:customLayout>
                    <cssgrid:GridResponsiveLayout containerQuery="true">
                        <cssgrid:layout>
                            <cssgrid:GridSettings
                                gridGap="1.5rem"
                                gridTemplateColumns="repeat(2, calc(50% - 0.75rem))"
                                gridAutoRows="5rem" />
                        </cssgrid:layout>
                    </cssgrid:GridResponsiveLayout>
                </f:customLayout>
                <f:GridListItem
                    id="widget"
                    type="Active"
                    press=".onSelectWidgetType">
                    <HBox
                        id="widgetContent"
                        alignItems="Center"
                        height="100%"
                        class="sapUiSmallMarginEnd">

                        <Avatar
                            id="avatar"
                            src="{icon}"
                            class="sapUiSmallMarginEnd sapUiSmallMarginBegin"
                            backgroundColor="Placeholder">
                            <layoutData>
                                <FlexItemData maxHeight="3rem" />
                            </layoutData>
                        </Avatar>

                        <VBox id="widgetTitleContent">
                            <Title
                                id="widgetTitle"
                                text="{title}"
                                titleStyle="H6"
                                wrapping="true" />
                            <Label
                                id="widgetDescription"
                                text="{description}"
                                visible="{= !!${description}}"
                                wrapping="true" />
                        </VBox>
                    </HBox>
                </f:GridListItem>
            </f:GridList>
        </VBox>
    </VBox>
</mvc:View>
