<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"
        afterClose="utils.JobDetail.onJobDetailDialogClose"
    >
        <VBox
            class="mc-dialog-header"
            alignItems="Stretch"
            justifyContent="SpaceBetween"
        >
            <HBox
                alignItems="Center"
                justifyContent="Start"
            >
                <Avatar
                    initials="{=${_contact_id/surname}.charAt(0) + ${_contact_id/forename}.charAt(0)}"
                    displaySize="S"
                    class="sapUiTinyMarginEnd"
                />
                <Title
                    text="{_contact_id/name}"
                    level="H3"
                />
            </HBox>
        </VBox>

        <VBox
            class='mc-form'
            backgroundDesign='Solid'
            alignContent='SpaceAround'
        >
            <List
                id="subtaskContactDetails-phones"
                class="mc-contact-detail-list phones"
                width="100%"
            >
                <headerToolbar>
                    <Toolbar>
                        <Title text="Phones" level="H3" />
                    </Toolbar>
                </headerToolbar>
                <dragDropConfig>
                    <dnd:DragDropInfo
                        dragStart="utils.Availabilities.onPhoneDrag"
                        drop="utils.Availabilities.onPhoneDrop"
                        sourceAggregation="items"
                        targetAggregation="items"
                        dropPosition="Between"
                    />
                </dragDropConfig>
            </List>
        </VBox>
            <VBox
            class='mc-form'
            backgroundDesign='Solid'
            alignContent='SpaceAround'
        >
            <f:Form editable='true'>
                <f:layout>
                    <f:ResponsiveGridLayout
                        labelSpanXL='4'
                        labelSpanL='4'
                        labelSpanM='4'
                        labelSpanS='4'
                        adjustLabelSpan='false'
                        emptySpanXL='0'
                        emptySpanL='0'
                        emptySpanM='0'
                        emptySpanS='0'
                        columnsXL='5'
                        columnsL='5'
                        columnsM='5'
                        singleContainerFullSize='true'
                    />
                </f:layout>
                <f:formContainers>
                    <f:FormContainer>
                        <f:FormElement
                            label="{parts: [{value:'LABEL'}, {value:'Sortieren'}], formatter: 'translate.Label.get'}"
                        >
                            <f:fields>
                                <CheckBox id="checkEnableDrag" selected="{object>/sort}" />
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement
                            label="{parts: [{value:'erp_jobs_dt'}, {value:'substitute'}, {value:'Vertretung'}], formatter: 'translate.Field.get'}"
                        >
                            <f:fields>
                                <CheckBox selected="{substitute}" />
                            </f:fields>
                        </f:FormElement>
                    </f:FormContainer>
                </f:formContainers>
            </f:Form>
        </VBox>
            <HBox
            class="sapUiSmallMargin"
            justifyContent="Center"
            alignContent="Center"
        >
            <Button
                text="{parts: [{value:'BUTTON'}, {value:'SAVE'}, {value:'Save'}], formatter: 'translate.Label.get'}"
                type="Emphasized"
                press="utils.JobDetail.onJobDetailDialogSave"
            />
        </HBox>
    </Dialog>
</core:FragmentDefinition>
