<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 
            visible="{= ${path: 'type', targetType: 'any'} === 'SHOP'}"
            text="{= ${_shop_id/sap_number}  + ' - ' + ${name}}" 
            class='sapUiTinyMarginBottom'
        />
        <Title 
            visible="{= ${path: 'type', targetType: 'any'} === 'CLIENT'}"
            text="{name}" 
            class='sapUiTinyMarginBottom'
        />
        <VBox 
            visible="{= ${path: 'erp_jobs_dt/0/contact_id', targetType: 'any'} === undefined}"
        >
        
        <!-- Warning, No Entries -->
            <Text 
                class="mc-item-warning"
                text="{parts: [{value:'LABEL'}, {value:'JOBS_ITEM_NO_ENTRY'}, {value:'Keine Teilnehmer zugewiesen'}], formatter: 'translate.Label.get'}"
            ></Text>
        </VBox>
        <VBox items="{path: 'erp_jobs_dt', templateShareable: false}">
        <grid:CSSGrid 
            gridTemplateColumns="1fr 1fr 1fr"
            class='mc-item-property-grid'
        >
        <HBox alignItems="Center" visible="{= ${path: 'status', targetType: 'any'} === 1 }">
            <core:Icon src="sap-icon://fa-light/user"
                class="sapUiTinyMarginEnd"
            />
            <Text text="{_contact_id/name}" />
        </HBox>
        <HBox >
            <core:Icon src="sap-icon://fa-light/phone"
                class="sapUiTinyMarginEnd"
            />
            <Text text="{parts: [{path: 'id'}], formatter: 'utils.JobDetail.getFirstContactDetailByJobDetailId'}"/>
        </HBox>
        <HBox alignItems="Center"  visible="{= ${path: 'status', targetType: 'any'} === 1 }">
            <core:Icon src="{=%{path: 'substitute', targetType: 'boolean'} ? 'sap-icon://fa-light/arrow-right-arrow-left' : 'sap-icon://fa-light/circle-1'}"
                class="sapUiTinyMarginEnd"
            />
            <Text text="{=${substitute} === 'true'? 'Vertretung' : 'Primär'}" />
        </HBox>
        </grid:CSSGrid>
        </VBox>
    </VBox>
    <HBox alignItems="Center" justifyContent="Center">
    <Button
        class='mc-items-expandButton'
        icon="sap-icon://fa-light/arrow-up-right-from-square"
        tooltip="{parts: [{value:'LITERAL'}, {value:'OPEN'}, {value:'Öffnen'}], formatter: 'translate.Label.get'}"
        type="Transparent"
        press="taskNav"
    >
        <customData>
            <core:CustomData key="module" value="jobs"/>
            <core:CustomData key="task" value="show"/>
            <core:CustomData key="field" value="id"/>
            <core:CustomData key="value" value="{id}"/>
        </customData>
    </Button>
    </HBox>
    </grid:CSSGrid>
    </CustomListItem>
</core:FragmentDefinition>
