<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:grid="sap.ui.layout.cssgrid"
    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}"
                ></Text>
            </VBox>
            
        <!-- </HBox> -->
        </grid:CSSGrid>
        
        <VBox class='mc-dialog-content' >
            
            <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 class='mc-dialog-list'>
            <List
                items="{path: 'erp_jobs_dt', templateShareable: false, parameters: {$filter: 'status lt 90'}}"
            >
                <CustomListItem class='sapUiSmallMarginBottom'
                >
                    <content>
                        <grid:CSSGrid
                            gridTemplateColumns="1fr 1fr 1fr"
                            width="100%"
                        >
                            <grid:items>
                                <HBox
                                    alignItems="Center"
                                    justifyContent="Start"
                                >
                                    <Avatar
                                        src='{= "sap-icon://fa-light/" + %{path: "_job_id/_cat_id/icon"}}'
                                        displaySize="S"
                                    ></Avatar>
                                </HBox>
                                    <!-- Job Name -->
                                <HBox
                                    alignItems="Center"
                                    justifyContent="Start">
                                    <Text
                                        text="{_job_id/name}"
                                    />
                                </HBox>
                                <!-- Client or Shop -->
                                <HBox
                                    alignItems="Center"
                                    justifyContent="Start"
                                >
                                    <Text
                                        text="{= %{_job_id/_shop_id/name} !== null ? ${_job_id/_shop_id/name} : ${_job_id/_client_id/name}}"
                                    />
                                </HBox>
                            </grid:items>
                        </grid:CSSGrid>
                    </content>
                </CustomListItem>
            </List>
        </VBox>
    
    </VBox>
        
    </Dialog>
</core:FragmentDefinition>
