{# #########################  Form modify globalParameter ###################### #}
<transition name="slide-right">
    <div id="modifyGlobalParameter" class="bg-white newOffer form-campaign px-5 pt-4 pb-5 active"
         v-if="showModifyPanel||showCreatePanel">
        <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="title mt-3">
                    <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 globalParameter'|trans }}</h5>
                    <h5 v-if="showCreatePanel"
                        class="ml-3 text-primary font-700 d-inline">{{ 'Create globalParameter'|trans }}</h5>
                </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="editedGlobalParameter.id" disabled>
                </div>
            </div>
            <div class="col pl-4 mt-3">
                <input-dropdown v-model="editedGlobalParameter.service" placeholder="Choose..."
                                key="globalParameterService" class="ml-4"
                                label="{{ 'GlobalParameter service'|trans }}"
                                :data-list="services"
                                props-return-value="name"
                                :init-value="editedGlobalParameter.service"
                                id="_globalParameter-service" :required="true"
                                ref="inputDropdownService"
                                @input="checkUnicityConstraint">
                    <template #prepend>
                        <div class="input-group-prepend">
                            <button class="btn btn-outline-secondary" type="button"
                                    @click="showAddService = true"
                                    title="{{ 'Add a service'|trans }}">
                                <i class="fa fa-plus small"></i>
                            </button>
                        </div>
                    </template>
                </input-dropdown>
            </div>
            <div class="col pl-4 mt-3">
                <div class="form-label-group position-relative input-login ml-4">
                    <label for="paramkey"
                           class="labelInput focusInput font-500">{{ 'GlobalParameter paramkey'|trans }}</label>
                    <input type="text" id="paramkey" name="_paramkey"
                           placeholder="{{ 'GlobalParameter paramkey'|trans }}"
                           class="form-control no-placeholder" style="font-family: 'Courier New'; color: #0000F0"
                           v-model="editedGlobalParameter.paramkey"
                           @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">{{ 'GlobalParameter description'|trans }}</label>
                    <input type="text" id="description" name="_description"
                           placeholder="{{ 'GlobalParameter description'|trans }}"
                           class="form-control no-placeholder"
                           v-model="editedGlobalParameter.description">
                </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="gbValue" class="labelInput focusInput font-500">
                        {{ 'GlobalParameter parameter value'|trans }}
                    </label>
                    <textarea class="form-control" id="gbValue"
                              style="font-family: 'Courier New'; white-space: pre; color: white; background-color: #1D2437;"
                              v-model="editedGlobalParameter.value"
                              rows="5"
                              :required="true"></textarea>
                    <p class="small text-right">
                        <span class="font-700" id="modifyGlobalParameterValueRemainContent">
                            <% remainModifiedValue %>
                        </span>
                        {{ 'remaining characters'|trans }}
                    </p>
                </div>
            </div>
            <div class="col pl-4">
                <input class="inp-cbx" id="global_parameter_activate" type="checkbox"
                       style="display: none;"
                       v-model="editedGlobalParameter.active"/>
                <label class="cbx d-flex align-items-center ml-4 w-fit-content" for="global_parameter_activate">
                    <span class="bg-white mr-2">
                        <svg width="10px" height="10px" viewbox="0 0 10 10"><polyline points="1.5 6 4.5 9 10.5 1"></polyline></svg>
                    </span>
                    <span> Active</span>
                </label>
            </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"
                        @click="modifyGlobalParameter"
                        id="modify_global_parameter_btn"
                        :disabled="!enableModifyParameterBtn">{{ 'Modify globalParameter'|trans }}</button>
                <button v-if="showCreatePanel" class="btn btn-primary rounded-30 px-4"
                        @click="createGlobalParameter"
                        id="create_global_parameter_btn"
                        :disabled="!enableCreateParameterBtn">{{ 'Create globalParameter'|trans }}</button>
            </div>
        </div>
        <modal-confirmation id-modal="addService" :show="showAddService" @confirmation="confirmationAddService">
            <template #header>
                <span>{{ 'Add a service'|trans }}</span>
            </template>
            <template #modal-body>
                <input type="text" class="form-control" v-model="newService.name" placeholder="{{ 'A service name'|trans }}...">
            </template>
            <template #confirm-btn>
                {{ 'Add'|trans }}
            </template>
            <template #cancel-btn>
                {{ 'Cancel'|trans }}
            </template>
        </modal-confirmation>
    </div>
</transition>