<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'
            initials="{= %{path: 'name', targetType: 'string'}.substring(0,2).toUpperCase() }"
            displaySize="S"
            backgroundColor="Accent6"
        />
        </HBox>
    <VBox class="mc-item-titles" justifyContent="Center" alignItems="Stretch">
        <Title text="{name}" class='sapUiTinyMarginBottom'/>
        <l:Grid 
            defaultSpan="XL4 L4 M4 S4"
            hSpacing="0"
            vSpacing="0"
            width="100%"
        >
        <HBox alignItems="Center">
            <core:Icon src="sap-icon://fa-light/tag"
                class="sapUiTinyMarginEnd"
            />
            <Text text="{query>/name}" />
        </HBox>
        <HBox alignItems="Center" visible="{= %{path: 'email', targetType: 'string'} !== ''}">
            <core:Icon src="sap-icon://fa-light/envelope"
                class="sapUiTinyMarginEnd"
            />
            <Link text="{email}" href="mailto:{email}" />
        </HBox>
        <HBox alignItems="Center" visible="{= %{path: 'phone', targetType: 'string'} !== ''}">
            <core:Icon src="sap-icon://fa-light/phone"
                class="sapUiTinyMarginEnd"
            />
            <Link text="{phone}" href="tel:{phone}" />
        </HBox>
        <HBox alignItems="Center" >
            <core:Icon 
                visible="{= ${path: 'query>/type', targetType: 'any'} === 'CLIENT' }"
                src="sap-icon://fa-light/sitemap"
                class="sapUiTinyMarginEnd"
            />
            <core:Icon 
                visible="{= ${path: 'query>/type', targetType: 'any'} === 'SHOP' }"
                src="sap-icon://fa-light/industry"
                class="sapUiTinyMarginEnd"
            />
            <core:Icon 
                visible="{= ${path: 'query>/type', targetType: 'any'} === 'ROSTER' }"
                src="sap-icon://fa-light/user-group"
                class="sapUiTinyMarginEnd"
            />
             <Text
                text="{parts: [
                    {value: 'cfr_users_dt'},
                    {path: 'id', type: 'sap.ui.model.type.Integer'}, 
                    {value: 'user_id'}, 
                    {path: 'query>/id', type: 'sap.ui.model.type.Integer'},
                    {value: 'role_id'}
                ], formatter: '.getCountBase'}"
                class="sapUiTinyMarginEnd"
            />
            <Text 
                visible="{= ${path: 'query>/type', targetType: 'any'} === 'CLIENT' }"
                text=" Organisationseinheiten"
            />
            <Text 
                visible="{= ${path: 'query>/type', targetType: 'any'} === 'SHOP' }"
                text=" Objekte"
            />
            <Text 
                visible="{= ${path: 'query>/type', targetType: 'any'} === 'ROSTER' }"
                text=" Sicherheitsdienste"
            />
        </HBox>
        </l:Grid>
    </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="users"/>
            <core:CustomData key="task" value="users_show"/>
            <core:CustomData key="field" value="id"/>
            <core:CustomData key="value" value="{id}"/>
        </customData>
    </Button>
    </HBox>
    </grid:CSSGrid>
    </CustomListItem>
</core:FragmentDefinition>