<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"
    >
        <VBox
            class="mc-dialog-header"
            alignItems="Stretch"
            justifyContent="SpaceBetween"
        >
            <HBox
                alignItems="Center"
                justifyContent="Start"
            >
                <Avatar
                    src="{= 'sap-icon://fa-light/' + %{_cat_id/icon}}"
                    displaySize="S"
                    class="sapUiTinyMarginEnd"
                />
                <Title
                    text="{_cat_id/name}"
                    level="H3"
                />
            </HBox>
        </VBox>
        <VBox
            class='mc-form'
            backgroundDesign='Solid'
            alignContent='SpaceAround'
            id='contact-detail-mod'
        >
            <f:Form editable='true'>
                <f:layout>
                    <f:ResponsiveGridLayout
                        labelSpanXL='12'
                        labelSpanL='12'
                        labelSpanM='12'
                        labelSpanS='12'
                        adjustLabelSpan='false'
                        emptySpanXL='0'
                        emptySpanL='4'
                        emptySpanM='0'
                        emptySpanS='0'
                        columnsXL='1'
                        columnsL='1'
                        columnsM='1'
                        singleContainerFullSize='true'
                    />
                </f:layout>
                <f:formContainers>
                    <f:FormContainer>
                        <f:FormElement
                            label='{parts: [{value:"crm_contacts_dt"}, {value:"email"}], formatter: "translate.Field.get"}'
                            visible="{= %{path: '_cat_id/name', targetType:  'string'}.includes('Email')}"
                        >
                            <f:fields>
                                <Input value="{path: 'email', type: 'format.Email'}" visible="{= %{path: '_cat_id/name', targetType:  'string'}.includes('Email')}">
                                    <customData>
                                        <core:CustomData
                                            key='mandatory'
                                            value="true"
                                        />
                                    </customData>
                                </Input>
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement
                            label='{parts: [{value:"crm_contacts_dt"}, {value:"phone"}], formatter: "translate.Field.get"}'
                            visible="{= !%{path: '_cat_id/name', targetType:  'string'}.includes('Email')}"
                        >
                            <f:fields>
                                <Input value="{path: 'phone', type: 'format.Phone'}" visible="{= ['Telefon extern', 'Mobiltelefon', 'SMS'].includes(${path: '_cat_id/name', targetType:  'string'})}">
                                    <customData>
                                        <core:CustomData
                                            key='mandatory'
                                            value="true"
                                        />
                                    </customData>
                                </Input>
                                <Input value="{path: 'phone', type: 'format.Pager'}" visible="{= ['Cityruf', 'Pager'].includes(${path: '_cat_id/name', targetType:  'string'})}">
                                    <customData>
                                           <core:CustomData
                                            key='mandatory'
                                            value="true"
                                        />
                                    </customData>
                                </Input>
                                <Input value="{path: 'phone', type: 'format.InternalPhone'}" visible="{= ['Telefon intern'].includes(${path: '_cat_id/name', targetType:  'string'})}">
                                    <customData>
                                           <core:CustomData
                                            key='mandatory'
                                            value="true"
                                        />
                                    </customData>
                                </Input>
                            </f:fields>
                        </f:FormElement>

                        <f:FormElement
                            label='{parts: [{value:"crm_contacts_dt"}, {value:"private"}], formatter: "translate.Field.get"}'
                            visible="{= ['Email extern', 'Telefon extern', 'Mobiltelefon', 'SMS'].includes(${path: '_cat_id/name', targetType:  'string'})}"
                        >
                            <f:fields>
                                <CheckBox selected="{_private}" />
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement
                            label='{parts: [{value:"crm_contacts_dt"}, {value:"comment"}], formatter: "translate.Field.get"}'
                        >
                            <f:fields>
                                <TextArea
                                    value='{comment}'
                                    growing='true'
                                    wrapping='Soft'
                                />
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement >
                            <f:fields>
                                <Text text="{_object}" visible="false"/> <!--  parch to load the object -->
                            </f:fields>
                        </f:FormElement>
                        <f:FormElement>
                            <f:fields>
                                <VBox>
                                    <List id="timeSegmentsList" />
                                </VBox>
                            </f:fields>
                        </f:FormElement>
                    </f:FormContainer>
                </f:formContainers>
            </f:Form>
            <HBox
                width='100%'
                alignItems='Center'
                justifyContent='Center'
            >
                <Button
                    text='{parts: [{value:"BUTTON"}, {value:"26532"}, {value:"Guardar"}], formatter: "translate.Label.get"}'
                    id='contact-detail-mod-submitButton'
                >
                    <customData>
                        <core:CustomData key='close' value='true'/>
                    </customData>
                </Button>
            </HBox>
        </VBox>
    </Dialog>
</core:FragmentDefinition>
