<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'
  }"
    controllerName="sap.mcsuite.controller.BaseController"
>
    <CustomListItem class='mc-contact-detail'>
        <grid:CSSGrid gridTemplateColumns="10fr 1fr">
            <HBox>
                <!-- Instead of a dot, show a switch -->
                <HBox
                    justifyContent="Center"
                    alignItems="Center"
                    class="mc-contact-detail-hbox"
                    width="5rem"
                >
                    <Switch
                        enabled="{parts: [{value: 'CONTACTS.UPDATE'}], formatter: '.checkScopes' }"
                        class="sapUiSizeCompact mc-contact-detail-switch"
                        type="AcceptReject"
                        change="utils.ContactDetail.onSwitchChange"
                        state="{= JSON.parse(%{_object}).active }"
                    >
                        <layoutData>
                            <FlexItemData growFactor="1" />
                        </layoutData>
                    </Switch>
                    <core:HTML
                        content="&lt;div class='mc-contact-detail-dot'>&lt;/div>"
                    />
                </HBox>
                <core:Icon
                    class="mc-contact-detail-icon"
                    src="{= 'sap-icon://fa-light/' + ${path: '_cat_id/icon'}}"
                />
                <Text
                    visible="{= %{path: '_private', targetType: 'boolean'} ? true : false}"
                    text="Privat"
                    class="sapUiTinyMarginEnd"
                />
                <Link
                    text="{
                        path: 'phone',
                        type: 'sap.mcsuite.model.formatter.Phone'
                    }" 
                    visible="{= ['Telefon extern', 'Mobiltelefon', 'SMS'].includes(%{_cat_id/name})}"
                    href="{= 'tel:' + ${phone}}"   
                    class="sapUiTinyMarginEnd"
                />
                <Link
                    text="{
                        path: 'phone',
                        type: 'sap.mcsuite.model.formatter.InternalPhone'
                    }" 
                    visible="{= ['Telefon intern'].includes(%{_cat_id/name})}"
                    href="{= 'tel:' + ${phone}}"   
                    class="sapUiTinyMarginEnd"
                />
                <Link
                    text="{
                        path: 'phone',
                        type: 'sap.mcsuite.model.formatter.Pager'
                    }" 
                    visible="{= ['Cityruf', 'Pager'].includes(%{_cat_id/name})}"
                    href="{= 'tel:' + ${phone}}"   
                    class="sapUiTinyMarginEnd"
                />
                <Link
                    text="{
                        path: 'email',
                        type: 'sap.mcsuite.model.formatter.Email'
                    }" 
                    visible="{= ['Email'].includes(%{_cat_id/name})}"
                    href="{= 'mailto:' + ${email}}"   
                    class="sapUiTinyMarginEnd"
                />
                <Text
                    visible="{= %{path: 'comment', targetType:  'any'} !== null}"
                    text="{= '(' + %{comment} + ')'}"
                    class="sapUiTinyMarginEnd"
                />
            </HBox>
            <HBox
                justifyContent="Center"
                alignItems="Center"
            >
                <Button
                    visible="{parts: [{value: 'CONTACTS.UPDATE'}], formatter: '.checkScopes'}"
                    icon="sap-icon://fa-light/pen"
                    class="no-border"
                    tooltip='{parts: [{value:"LITERAL"}, {value:"EDIT"}, {value:"Bearbeiten"}], formatter: "translate.Label.get"}'
                >
                    <customData>
                        <core:CustomData
                            key="id"
                            value="{id}"
                        />
                        <core:CustomData
                            key="edit"
                            value="true"
                        />
                    </customData>
                </Button>
                <Button
                    visible="{parts: [{value: 'CONTACTS.UPDATE'}], formatter: '.checkScopes'}"
                    icon="sap-icon://fa-light/trash"
                    class="no-border"
                    press="utils.ContactDetail.onDeleteContactDetail"
                    tooltip='{parts: [{value:"LITERAL"}, {value:"DELETE"}, {value:"Löschen"}], formatter: "translate.Label.get"}'
                />
            </HBox>
        </grid:CSSGrid>
        <customData>
            <core:CustomData
                key="prio"
                value="{prio}"
            />
        </customData>
    </CustomListItem>
</core:FragmentDefinition>
