<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:dnd="sap.ui.core.dnd"
    xmlns:grid="sap.ui.layout.cssgrid"
    xmlns:l="sap.ui.layout"
    xmlns:layout="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    core:require="{
    format: 'sap/mcsuite/model/Format', 
    translate: 'sap/mcsuite/model/Translate', 
    utils: 'sap/mcsuite/model/Utils'
  }"
>
    <CustomListItem>
        <grid:CSSGrid 
            gridTemplateColumns="1fr 10fr 1fr"
            class="mc-item-grid"
        >
            <HBox alignItems="Center" justifyContent="Center">
                <Avatar 
                    class='mc-item-avatar'
                    src="{='sap-icon://fa-light/' + ${_cat_id/icon}}"
                    displaySize="S"
                    backgroundColor="Accent6"
                />
            </HBox>
            <VBox class="mc-item-titles" justifyContent="Center" alignItems="Stretch" >
                <Title text="{name}" class='sapUiTinyMarginBottom'/>
                <grid:CSSGrid 
                    gridTemplateColumns="1fr 1fr"
                    class='mc-item-property-grid'
                >
                <HBox alignItems="Center">
                    <core:Icon src="sap-icon://fa-light/list"
                        class="sapUiTinyMarginEnd"
                    />
                    <Text text="{_cat_id/name}" />
                </HBox>
                <HBox alignItems="Center">
                    <core:Icon src="sap-icon://fa-light/spinner-scale"
                        class="sapUiTinyMarginEnd"
                    />
                    <Text text="{_status/name}" />
                </HBox>
                </grid:CSSGrid>
            </VBox>
            <HBox alignItems="Center" justifyContent="Center">
                <Button
                    class='mc-items-expandButton'
                    icon="sap-icon://fa-light/arrow-up-right-from-square"
                    type="Transparent"
                    press="taskNav"
                >
                    <customData>
                        <core:CustomData key="module" value="clusters"/>
                        <core:CustomData key="task" value="clusters_show"/>
                        <core:CustomData key="field" value="id"/>
                        <core:CustomData key="value" value="{id}"/>
                    </customData>
                </Button>
                <Button 
                    class='mc-items-expandButton'
                    icon="sap-icon://fa-light/trash"
                    type="Transparent"
                    press="utils.Items.deleteItem"
                >
                    <customData>
                        <core:CustomData key="from" value="shops"/>
                        <core:CustomData key="module" value="clusters"/>
                        <core:CustomData key="type" value="shop"/>
                        <core:CustomData key="field" value="shop_id"/>
                        <core:CustomData key="value" value="{id}"/>
                    </customData>
                </Button>
            </HBox>
        </grid:CSSGrid>
    </CustomListItem>
</core:FragmentDefinition>
