{# #########################  Form modify subscription ###################### #}
<transition name="slide-right">
    <div id="modifySubscription" 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 subscription'|trans }} DAF <%
                        editedSubscription.dafInstance.nameInstance %></h5>
                    <h5 v-if="showCreatePanel"
                        class="ml-3 text-primary font-700 d-inline">{{ 'Create subscription'|trans }} DAF <%
                        editedSubscription.dafInstance.nameInstance %></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="editedSubscription.id" disabled>
                </div>
            </div>
            <div class="col pl-4 mt-3">
                <input-dropdown v-model="editedSubscription.user"
                                placeholder="Choose a user..."
                                key="subscriptionUser" class="ml-4"
                                label="{{ 'Subscription user'|trans }}"
                                :data-list="usersOptions"
                                props-displayed-value="selectedName"
                                :return-raw-option="true"
                                :init-value="editedSubscription.user.id"
                                :required="true"
                                id="_subscription-user"
                                ref="inputDropdownUser">
                </input-dropdown>
            </div>
            <div class="col pl-4 mt-3" v-if="editedSubscription.user.intern && editedSubscription.expirationDate == null">
                <input-dropdown v-model="editedSubscription.periodWeek"
                                placeholder="Choose a period..."
                                key="subscriptionUser" class="ml-4"
                                label="{{ 'Subscription period'|trans }}"
                                props-displayed-value="name"
                                props-return-value="value"
                                :data-list="subscriptionPeriodOptions"
                                :init-value="null"
                                :required="true"
                                id="_subscription-period"
                                ref="inputDropdownPeriod">
                </input-dropdown>
            </div>
            <div class="col pl-4 mt-3">
                <input-dropdown v-model="editedSubscription.mailSub"
                                placeholder="Choose a frequency..."
                                key="subscriptionFrequency" class="ml-4"
                                label="{{ 'Subscription report frequency'|trans }}"
                                props-return-value="id"
                                :data-list="frequencies"
                                :init-value="editedSubscription.mailSub"
                                :required="true"
                                id="_subscription-frequency"
                                ref="inputDropdownFequency">
                </input-dropdown>
            </div>
            <div class="col pl-4 mt-3">
                <input-dropdown v-model="editedSubscription.jobgroupFilter"
                                placeholder="Choose a jobgroup..."
                                key="subscriptionUser" class="ml-4"
                                label="{{ 'Subscription jobgroup'|trans }}"
                                props-displayed-value="name"
                                :data-list="jobgroupsOptions"
                                :return-raw-option="true"
                                :init-value="editedSubscription.jobgroupFilter?.id"
                                :required="false"
                                id="_subscription-jobgroup"
                                ref="inputDropdownJobgroup">
                </input-dropdown>
            </div>
            <div class="col pl-4 mt-3" v-if="editedSubscription.expirationDate != null">
                {{ "Subscription expiration date: "|trans }}<% editedSubscription.expirationDate %>
            </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="modifySubscription"
                        id="modify_global_parameter_btn"
                        :disabled="!enableModifySubscriptionBtn">{{ 'Modify subscription'|trans }}</button>
                <button v-if="showCreatePanel" class="btn btn-primary rounded-30 px-4"
                        @click="createSubscription"
                        id="create_global_parameter_btn"
                        :disabled="!enableCreateSubscriptionBtn">{{ 'Create subscription'|trans }}</button>
            </div>
        </div>
    </div>
</transition>