<div id="edit-notification" uk-modal="bg-close:false">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">
            <h2>Edit Notification</h2>
        </div>
        <div class="uk-modal-body uk-padding-small">
            <div class="uk-margin">
                <div class="uk-margin-bottom">
                    <h3 class="uk-margin-remove-bottom">Type</h3>
                    <small>What type of notification is this?</small>
                </div>
                <div class="uk-form-controls">
                    <select class="uk-select" v-model="notificationBeingEdited.notification_type" @change="setNotificationType(notificationBeingEdited)">
                        <option v-for="(type) of notificationTypes" :value="type.type">{{ type.category }} ({{ _.startCase(type.type) }})</option>
                    </select>
                </div>
            </div>
            <div class="uk-margin">
                <div class="uk-margin-bottom">
                    <h3 class="uk-margin-remove-bottom">Color</h3>
                    <small>Because everything needs a splash of color</small>
                </div>
                <div class="uk-form-controls">
                    <select class="uk-select" @change="onColorChange(notificationBeingEdited)" v-model="selectedColorHex">
                        <option v-for="(color) of colorPresets" :value="color.hex">{{ color.name }}</option>
                    </select>
                    <div class="uk-margin" v-if="selectedColorHex == 'custom'">
                        <slider-picker class="uk-width-1-1" @input="updateNotificationColor($event, notificationBeingEdited)" :value="notificationBeingEdited.notification_color"/>
                    </div>
                </div>
            </div>
            <div class="uk-margin">
                <div class="uk-margin-bottom">
                    <h3 class="uk-margin-remove-bottom">Preview</h3>
                </div>
                <div class="message-preview" :style="{ 'border-color': notificationBeingEdited.notification_color }">
                    <div class="header">
                        <%= image_tag("esm_ico.ico", width: 25, height: 25, class: "uk-border-circle") %>
                        [{{ messagePreview.serverID }}] {{ messagePreview.serverName }}
                    </div>
                    <div class="title">
                        <vue-markdown :source="messagePreview.title"></vue-markdown>
                    </div>
                    <div class="message">
                        <vue-markdown :source="messagePreview.message"></vue-markdown>
                    </div>
                </div>
            </div>
            <div class="uk-margin">
                <div class="uk-margin-bottom">
                    <h3 class="uk-margin-remove-bottom">Title</h3>
                    <%= render partial: "notifications/variable_popover", locals: { model: "notificationBeingEdited" } %>
                </div>
                <div class="uk-form-controls">
                    <input type="text" class="uk-input" placeholder="Your custom title here" @input="setNotificationTitle($event, notificationBeingEdited)" :value="notificationBeingEdited.notification_title"></input>
                    <div class="uk-align-right">
                        <small
                            :class="{ 'esm-text-color-red': editNotificationTitleCharCount >= this.limits.TITLE_LENGTH_MAX }"
                            v-tooltip="'Warning: This count does not include replaced values. If the message is over the limit, it will be truncated automatically'"
                        >{{ editNotificationTitleCharCount }}/{{ this.limits.TITLE_LENGTH_MAX }}</small>
                    </div>
                </div>
            </div>
            <div class="uk-margin">
                <div class="uk-margin-bottom">
                    <h3 class="uk-margin-remove-bottom">Message</h3>
                    <%= render partial: "notifications/variable_popover", locals: { model: "notificationBeingEdited" } %>
                </div>
                <div class="uk-form-controls">
                    <textarea class="uk-textarea" rows="3" placeholder="Your custom message here" @input="setNotificationMessage($event, notificationBeingEdited)" :value="notificationBeingEdited.notification_description"></textarea>
                    <div class="uk-align-right">
                        <small
                            v-tooltip="'Warning: This count does not include replaced values. If the message is over the limit, it will be truncated automatically'"
                            :class="{ 'esm-text-color-red': editNotificationDescriptionCharCount >= this.limits.DESCRIPTION_LENGTH_MAX }"
                        >{{ editNotificationDescriptionCharCount }}/{{ this.limits.DESCRIPTION_LENGTH_MAX }}</small>
                    </div>
                </div>
            </div>

            <div class="uk-margin-large-top">
                <button class="uk-button esm-button-confirm uk-width-1-1 uk-margin uk-modal-close" type="button" @click="saveNotification" :disabled="disableNotificationSaveButton">Save</button>
                <button class="uk-button esm-button-danger uk-width-1-1 uk-modal-close" type="button" @click="discardChanges">Cancel</button>
            </div>
        </div>
    </div>
</div>