{# #########################  Form modify service ###################### #}
<transition name="slide-right">
    <div id="modifyServicesBrowser"
         class="bg-white newOffer form-campaign px-5 pt-4 pb-5 active"
         v-cloak
         v-if="showModifyPanel||showCreatePanel"
         style="z-index: 1041">
        <div class="w-100 mb-5 pb-4">
            <div class="header d-flex flex-column pl-2 mb-5">
                <div v-if="showModifyPanel" class="slider-icon-group active ml-auto cursor-pointer"
                     style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);"
                     @click="closeSideModal('Modify')">
                    <div class="slider-icon">
                        <i class="fal fa-times text-white"></i>
                    </div>
                </div>
                <div v-if="showCreatePanel" class="slider-icon-group active ml-auto cursor-pointer"
                     style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);"
                     @click="closeSideModal('Create')">
                    <div class="slider-icon">
                        <i class="fal fa-times text-white"></i>
                    </div>
                </div>
                <div class="row">
                    <div class="title mt-3 col-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="21.429" height="15" viewBox="0 0 21.429 15">
                            <path id="Icon_material-playlist-add" data-name="Icon material-playlist-add"
                                  d="M15.857,13.286H3v2.143H15.857Zm0-4.286H3v2.143H15.857Zm4.286,8.571V13.286H18v4.286H13.714v2.143H18V24h2.143V19.714h4.286V17.571ZM3,19.714h8.571V17.571H3Z"
                                  transform="translate(-3 -9)" fill="#1d446b" opacity="0.89"></path>
                        </svg>
                        <h5 v-if="showModifyPanel"
                            class="ml-3 text-primary font-700 d-inline">{{ 'Modify service'|trans }}</h5>
                        <h5 v-if="showCreatePanel"
                            class="ml-3 text-primary font-700 d-inline">{{ 'Create service'|trans }}</h5>
                    </div>
                    <div class="col-sm"></div>
                    <div class="col-sm">
                        <button v-if="isNotEmpty" class="btn btn-primary rounded-30 px-4"
                                @click="emptyForm"
                                id="empty_form_btn">{{ 'Empty form'|trans }}</button>
                    </div>
                </div>
            </div>
            <div class="col pl-4 mt-3">
                <div v-if="showModifyPanel" class="form-label-group position-relative input-login ml-4">
                    <label for="id"
                           class="labelInput focusInput font-500">Id</label>
                    <input type="text" id="id" name="_id"
                           class="form-control no-placeholder "
                           v-model="editedService.id" disabled>
                </div>
            </div>
            <div class="col pl-4 mt-3">
                <div class="form-label-group position-relative input-login ml-4">
                    <label for="name"
                           class="labelInput focusInput font-500">{{ 'ServicesBrowser name'|trans }}</label>
                    <input type="text" id="name" name="_name"
                           placeholder="{{ 'ServicesBrowser name'|trans }}"
                           class="form-control no-placeholder"
                           v-model="editedService.name"
                           @blur="checkUnicityConstraint">
                </div>
            </div>
            <div class="col pl-4 mt-3">
                <div class="form-label-group position-relative input-login ml-4">
                    <label for="description"
                           class="labelInput focusInput font-500">{{ 'ServicesBrowser description'|trans }}</label>
                    <input type="text" id="description" name="_description"
                           placeholder="{{ 'ServicesBrowser description'|trans }}"
                           class="form-control no-placeholder"
                           v-model="editedService.description">
                </div>
            </div>
            <div class="col pl-4 mt-3 d-flex flex-column">
                <input-dropdown v-model="editedService.imgLink"
                                placeholder="{{ 'ServicesBrowser choose image'|trans }}"
                                key="imgLink" class="ml-4"
                                label="{{ 'ServicesBrowser imgLink'|trans }}"
                                :data-list="sbImgList"
                                props-return-value="img"
                                props-displayed-value="name"
                                :init-value="editedService.imgLink"
                                id="imgLink" :required="false"
                                ref="inputDropdownImgLink">
                </input-dropdown>
            </div>
            <div class="col pl-4 mt-3">
                <div class="form-label-group position-relative input-login ml-4">
                    <label for="fileupload"
                           class="labelInput focusInput font-500">{{ 'ServicesBrowser upload image'|trans }}
                    </label>
                    <div class="flex w-full h-screen items-center justify-center text-center">
                        <div class="bg-gray-100 border border-gray-300" style="padding: 3rem"
                             @dragover="dragover"
                             @dragleave="dragleave"
                             @drop="drop">
                            <input id="fileupload"
                                   type="file"
                                   multiple name="fields[assetsFieldHandle][]"
                                   class="w-px h-px opacity-0 overflow-hidden absolute"
                                   ref="file"
                                   accept=".pdf,.jpg,.jpeg,.png"
                                   style="display:none"
                            />

                            <label for="fileupload" class="block cursor-pointer">
                                <div id="dropContainer">
                                    {{ 'ServicesBrowser drag and drop'|trans }}
                                    <span class="underline">{{ 'ServicesBrowser click here'|trans }}</span>
                                </div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col pl-4 mt-3 d-flex flex-column">
                <div class="form-label-group position-relative input-login ml-4">
                    <label for="serviceLink" class="labelInput focusInput font-500">
                        {{ 'ServicesBrowser serviceLink'|trans }}
                    </label>
                    <input type="text" id="serviceLink" name="_serviceLink"
                           placeholder="{{ 'ServicesBrowser serviceLink'|trans }}"
                           class="form-control no-placeholder"
                           v-model="editedService.serviceLink">
                </div>
            </div>
            <div class="col pl-4 mt-3 d-flex flex-column">
                <div class="form-label-group position-relative input-login ml-4">
                    <label for="category" class="labelInput focusInput font-500">
                        {{ 'ServicesBrowser category'|trans }}
                    </label>
                    <input type="text" id="category" name="_category"
                           placeholder="{{ 'ServicesBrowser category'|trans }}"
                           class="form-control no-placeholder"
                           v-model="editedService.category">
                </div>
            </div>

            <div class="col pl-4 mt-3">
                <multi-select-dropdown v-model="editedService.userTeams"
                                       placeholder="{{ 'Choose teams'|trans }}"
                                       key="userTeams" class="ml-4"
                                       label="{{ 'ServicesBrowser userTeams'|trans }}"
                                       :data="userTeams"
                                       label-key="name"
                                       key-option="id"
                                       input-value-text="Nb teams:"
                                       :init-value="editedService.userTeams"
                                       id="_user_teams" :required="false"
                                       ref="inputDropdownTeams">
                </multi-select-dropdown>
            </div>

            <div class="col pl-4 mt-5 d-flex justify-content-end mx-4 ">
                <button v-if="showModifyPanel" class="btn btn-primary rounded-30 px-4 alert-danger"
                        @click="openDeleteServiceModal"
                        id="modify_service_btn">{{ 'Delete service'|trans }}</button>
                <button v-if="showModifyPanel" class="btn btn-primary rounded-30 px-4 mx-4"
                        @click="modifyService"
                        id="modify_service_btn"
                        :disabled="!enableModifyServiceBtn">{{ 'Save change'|trans }}</button>
                <button v-if="showCreatePanel" class="btn btn-primary rounded-30 px-4"
                        @click="createService"
                        id="create_service_btn"
                        :disabled="!enableCreateServiceBtn">{{ 'Create service'|trans }}</button>
            </div>
        </div>
    </div>
</transition>
<div class="modal fade"
     id="delete-service-modal"
     role="dialog"
     aria-labelledby="confirmDeleteModal"
     aria-hidden="true"
     style="z-index: 1042">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="d-flex justify-content-end mb-2 cursor-pointer" @click="closeModalDeleteService">
                    <button type="button" class="close font-300" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true" style="font-size: 2rem;">&times;</span>
                    </button>
                </div>
                <div class="mt-4 mb-4 d-flex">
                    <i class="fa-trash-alt fal text-danger fa-2x mx-auto"></i>
                </div>
                <div class="mb-4 mx-auto text-center w-75">
                    {{ 'Do you really want to delete this service?'|trans }}
                </div>
                <div class="d-flex justify-content-between pt-4">
                    <button data-dismiss="modal" class="bg-light btn text-primary"
                            @click="closeModalDeleteService">{{ 'Cancel'|trans }}</button>
                    <button class="btn btn-danger text-white"
                            @click="confirmDeleteService">{{ 'Delete'|trans }}</button>
                </div>
            </div>
        </div>
    </div>
</div>