<div class="uk-width-2-3 uk-inline" v-if="!_.isEmpty(newNotification)">
    <h2>New Notification</h2>
    <div class="uk-margin uk-width-2-3">
        <div class="uk-margin-bottom">
            <h3 class="uk-margin-remove-bottom">Preview</h3>
        </div>
        <div class="message-preview" :style="{ 'border-color': notificationColor(newNotification) }">
            <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" :typographer="false" :task-lists="false" :xhtml-out="false" :html="false" :watches="['source']"></vue-markdown>
            </div>
            <div class="message">
                <vue-markdown :source="messagePreview.message" :typographer="false" :task-lists="false" :xhtml-out="false" :html="false" :watches="['source']"></vue-markdown>
            </div>
        </div>
    </div>
    <div class="uk-margin" uk-grid>
        <div class="uk-width-1-3">
            <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="newNotification.notification_type" @change="setNotificationType(newNotification)">
                    <option v-for="(type) of notificationTypes" :value="type.type">{{ type.category }} ({{ _.startCase(type.type) }})</option>
                </select>
            </div>
        </div>
        <div class="uk-width-2-3">
            <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">
                <div uk-grid>
                    <div class="uk-width-1-4">
                        <select class="uk-select" @change="onColorChange(newNotification)" v-model="selectedColorHex">
                            <option v-for="(color) of colorPresets" :value="color.hex">{{ color.name }}</option>
                        </select>
                    </div>
                    <div v-if="selectedColorHex == 'custom'">
                        <slider-picker @input="updateNotificationColor($event, newNotification)" :value="newNotification.notification_color"/>
                    </div>
                </div>
            </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: "newNotification" } %>
        </div>
        <div class="uk-form-controls">
            <input type="text" class="uk-input" placeholder="Your custom title here" @input="setNotificationTitle($event, newNotification)"></input>
            <div class="uk-align-right">
                <small
                    :class="{ 'esm-text-color-red': newNotificationTitleCharCount >= 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'"
                >{{ newNotificationTitleCharCount }}/{{ 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: "newNotification" } %>
        </div>
        <div class="uk-form-controls">
            <textarea class="uk-textarea" rows="3" placeholder="Your custom message here" @input="setNotificationMessage($event, newNotification)"></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': newNotificationDescriptionCharCount >= this.limits.DESCRIPTION_LENGTH_MAX }"
                >{{ newNotificationDescriptionCharCount }}/{{ this.limits.DESCRIPTION_LENGTH_MAX }}</small>
            </div>
        </div>
    </div>

    <div class="uk-margin-large-top">
        <div class="uk-position-bottom-right">
            <button class="uk-button esm-button-danger uk-margin-right" type="button" @click="discardChanges">Cancel</button>
            <button class="uk-button esm-button-confirm" type="button" @click="createNotification" :disabled="disableNotificationCreateButton">Create</button>
        </div>
    </div>
</div>