<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:mcts="sap.mcsuite.controls.ts"
    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"
>
    <Dialog
        draggable="true"
        contentHeight="auto"
        contentWidth="auto"
        showHeader="false"
        class="mc-dialog"
    >
        <VBox
            class="mc-dialog-header"
            alignItems="Stretch"
            justifyContent="SpaceBetween"
        >
            <grid:CSSGrid
                gridTemplateColumns="2fr 5fr"
                width="90%"
            >
                <HBox
                    alignItems="Center"
                    justifyContent="Center"
                >
                    <Avatar
                        src="sap-icon://fa-light/calendar"
                        displaySize="S"
                        class="sapUiTinyMarginEnd"
                    />
                    <Title
                        text='{parts: [{value:"SUBTITLE"}, {value:"26777"}, {value:"Add detail"}], formatter: "translate.Label.get"}'
                        level='H2'
                    />
                </HBox>
                <!-- </HBox> -->
            </grid:CSSGrid>
        </VBox>
        <VBox class='mc-dialog-content'>
            <VBox
                class='mc-form'
                backgroundDesign='Solid'
                alignContent='SpaceAround'
                id='mc-dialog-form'
            >
                <f:Form editable='true'>
                    <f:layout>
                        <f:ResponsiveGridLayout
                            labelSpanXL='2'
                            labelSpanL='2'
                            labelSpanM='2'
                            labelSpanS='2'
                            adjustLabelSpan='true'
                            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:"gpv_rosters_dt"}, {value:"contact_id"}], formatter: "translate.Field.get"}'
                            >
                                <f:fields>
                                    <Input
                                        id='roster-detail-create-contact-input'
                                        showValueHelp='true'
                                        value='{newEntity>/name}'
                                        selectedKey="{path: 'newEntity>/contact_id', targetType: 'string', type: 'sap.ui.model.type.Integer', formatOptions: { groupingEnabled: false }}"
                                        suggestionItems="{path: '/gpv_rosters_dt', 
                                            filters: [{path: 'type', operator: 'EQ', value1: 'CONTACT'}], 
                                            sorter: {path: 'name', descending: false}}"
                                        class='mc-add-select'
                                        editable='true'
                                        valueHelpIconSrc='sap-icon://fa-solid/chevron-down'
                                    >
                                        <customData>
                                            <core:CustomData
                                                key='mandatory'
                                                value='false'
                                            />
                                            <core:CustomData
                                                key='table'
                                                value='gpv_rosters_dt'
                                            />
                                            <core:CustomData
                                                key='filter'
                                                value="type eq 'CONTACT' and roster_id eq $id$"
                                            />
                                        </customData>
                                        <core:Item
                                            key="{path: 'contact_id', type: 'sap.ui.model.type.Integer', formatOptions: { groupingEnabled: false }}"
                                            text='{_contact_id/name}'
                                        />
                                    </Input>
                                </f:fields>
                            </f:FormElement>
                            <f:FormElement
                                label='{parts: [{value:"gpv_rosters_dt"}, {value:"start"}], formatter: "translate.Field.get"}'
                            >
                                <f:fields>
                                    <!-- Date -->
                                    <DatePicker
                                        value="{path: 'newEntity>/startDate', type: 'format.Date'}"
                                    />
                                    <!--  -->
                                    <HBox
                                        justifyContent="Center"
                                        alignItems="Center"
                                    >
                                        <Button
                                            icon="sap-icon://fa-light/minus"
                                            press='utils.Roster.reduceTime'
                                            class="no-border"
                                            width="2rem"
                                        />
                                        <Input
                                            id='roster-detail-create-time-start'
                                            value="{path: 'newEntity>/startTime', type: 'format.DayTime'}"
                                            width="4rem"
                                            change="utils.Roster.onTimeChange"
                                        />
                                        <Button
                                            icon="sap-icon://fa-light/plus"
                                            press='utils.Roster.addTime'
                                            class="no-border"
                                            width="2rem"
                                        />
                                    </HBox>
                                </f:fields>
                            </f:FormElement>
                            <f:FormElement
                                label='{parts: [{value:"gpv_rosters_dt"}, {value:"end"}], formatter: "translate.Field.get"}'
                            >
                                <f:fields>
                                    <DatePicker
                                        value="{path: 'newEntity>/endDate', type: 'format.Date'}"
                                    />
                                    <HBox
                                        justifyContent="Center"
                                        alignItems="Center"
                                    >
                                        <Button
                                            icon="sap-icon://fa-light/minus"
                                            press='utils.Roster.reduceTime'
                                            class="no-border"
                                            width="2rem"
                                        />
                                        <Input
                                            id='roster-detail-create-time-end'
                                            value="{path: 'newEntity>/endTime', type: 'format.DayTime'}"
                                            width="4rem"
                                            change="utils.Roster.onTimeChange"
                                        />
                                        <Button
                                            icon="sap-icon://fa-light/plus"
                                            press='utils.Roster.addTime'
                                            class="no-border"
                                            width="2rem"
                                        />
                                    </HBox>
                                </f:fields>
                            </f:FormElement>
                            <f:FormElement
                                label='{parts: [{value:"gpv_rosters_dt"}, {value:"comment"}], formatter: "translate.Field.get"}'
                            >
                                <f:fields>
                                    <TextArea value="{path: 'newEntity>/comment'}">
                                        <customData>
                                            <core:CustomData
                                                key='mandatory'
                                                value='false'
                                            />
                                        </customData>
                                    </TextArea>
                                </f:fields>
                            </f:FormElement>
                        </f:FormContainer>
                    </f:formContainers>
                </f:Form>
            </VBox>
            <HBox
                alignContent="Center"
                justifyContent="Center"
                width='100%'
            >
                <Button
                    press='utils.Roster.saveAppointment'
                    text='{parts: [{value:"LITERAL"}, {value:"SAVE"}, {value:"Speichern"}], formatter: "translate.Label.get"}'
                />
            </HBox>
        </VBox>
    </Dialog>
</core:FragmentDefinition>
