<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'
  }"  
>
    <Dialog
        draggable="true"
        contentHeight="auto"
        contentWidth="auto"
        showHeader="false"
        class="mc-dialog"
        >
        <HBox
            alignItems="Center"
            justifyContent="Center"
            class='mc-dialog-toolButtons'
        >
            <Button
                class='transparent-button'
                icon="sap-icon://fa-light/copy"
                type="Unstyled"
                press="copyDialogData"
            />
            <Button
                class='transparent-button'
                icon="sap-icon://fa-light/arrow-up-right-from-square"
                type="Unstyled"
                press="taskNav"
            >
                <customData>
                    <core:CustomData
                        key="module"
                        value="contacts"
                    />
                    <core:CustomData
                        key="task"
                        value="contacts_show"
                    />
                    <core:CustomData
                        key="field"
                        value="id"
                    />
                    <core:CustomData
                        key="value"
                        value="{id}"
                    />
                </customData>
            </Button>
        </HBox>
    <VBox class="mc-dialog-header" alignItems="Stretch" justifyContent="SpaceBetween">
        <grid:CSSGrid gridTemplateColumns="2fr 5fr">
            <HBox alignItems="Start" justifyContent="Center">
                <Avatar 
                    initials="{=${surname}.charAt(0) + ${forename}.charAt(0)}"
                    displaySize="S"
                    class="sapUiTinyMarginEnd"
                ></Avatar>
            </HBox>
            <VBox alignItems="Start" justifyContent="Center">
                <HBox alignItems="Center" justifyContent="Start" height="1rem">
                    <Title 
                        text="{name}" level="H3"
                    ></Title>
                    
                </HBox>
                <Text 
                    text="{= ${_client_id/name} + ', ' + ${_shop_id/name}}"
                ></Text>
            </VBox>
            
        <!-- </HBox> -->
        </grid:CSSGrid>
        
        <VBox class='mc-dialog-content' >
            <VBox items="{erp_jobs_dt}" class='sapUiSmallMarginBottom'>
            <HBox alignItems="Center" justifyContent="Start" width="100%">
                <core:Icon src="{= 'sap-icon://fa-light/' + ${_job_id/_cat_id/icon}}" color="{_job_id/_cat_id/color}" size="1rem" class='sapUiSmallMarginEnd'></core:Icon>
                <Text text="{_job_id/name}" class='sapUiSmallMarginEnd'></Text>
                <Text text="{_job_id/_client_id/name}" class='sapUiSmallMarginEnd' visible="{= %{path: '_job_id/_client_id/name', targetType: 'string'} !== null}"></Text>
                <Text text="{_job_id/_shop_id/name}" class='sapUiSmallMarginEnd' visible="{= %{path: '_job_id/_shop_id/name', targetType: 'string'} !== null}"></Text>
            </HBox> 
            </VBox>
            <VBox class='sapUiSmallMarginBottom' items="{path: 'crm_contacts_dt', templateShareable: false}">
                <HBox alignItems="Center" justifyContent="Start" width="100%">
                <!-- null check does not work -->
                <core:Icon src="{='sap-icon://fa-light/' + (%{phone} !== null ? 'phone' : 'envelope')}" size="1rem" class='sapUiSmallMarginEnd'></core:Icon>
                    <Link
                                    text="{= %{phone} !== null ? ${phone} : ${email}}"
                                    href="{= %{phone} !== null ? 'tel:' + ${phone} : 'mailto:' + ${email}}"
                                    class='dialog-list-link'
                                />
                </HBox>
            </VBox>
        </VBox>
    
    </VBox>
        
    </Dialog>
</core:FragmentDefinition>
