<h1 class="uk-visible@m">
  Notification Configuration
  <small><%= link_to "", wiki_notification_configuration_path, class: "fas fa-question-circle", target: "_blank" %></small>
</h1>
<%= tag.div id: "notifications", data: { notifications: @notifications, community_id: @community.community_id, servers: @servers, limits: ESM::EMBED.to_h, community_public_id: @community.public_id } do %>
  <div class="uk-visible@xl">
    <div uk-grid>
      <div class="uk-width-1-3">
        <div uk-grid>
          <div class="uk-width-1-2">
            <h2>
              Notifications
              <small>
                <a class="esm-text-color-red" @click="showNewNotification">
                  <i class="fas fa-plus"></i>
                </a>
              </small>
            </h2>
          </div>

          <div class="uk-width-1-2">
            <select class="uk-select" v-model="selectedFilter">
              <option v-for="(filter) of filters" :value="filter.value">{{ filter.name }}</option>
            </select>
          </div>
        </div>

        <ul class="uk-list message-configuration-list">
          <li class="uk-inline uk-width-1-1" v-for="(notif) of filteredNotifications" :style="{ 'border-color': notificationColor(notif) }">
            <h4 class="header">
              {{ _.capitalize(notif.notification_category) }}
              <small>({{ _.startCase(notif.notification_type) }})</small>
            </h4>
            <div class="title">
              {{ notif.notification_title }}
            </div>
            <div class="message">
              {{ notif.notification_description }}
            </div>
            <div class="uk-position-top-right uk-position-small">
              <a class="fas fa-pencil-alt esm-text-color-red uk-margin-small-right" @click="editNotification(notif)"></a>
              <a class="fas fa-times esm-text-color-red" @click="deleteNotification(notif)"></a>
            </div>
          </li>
        </ul>
      </div>
      <%= render partial: "notifications/desktop/new_notification" %>
      <%= render partial: "notifications/desktop/edit_notification" %>
    </div>
  </div>

  <div class="uk-hidden@xl">
    <button class="uk-button esm-button-confirm uk-width-1-1" type="button" @click="showNewNotification">Create New Notification</button>

    <div class="uk-margin">
      <select class="uk-select" v-model="selectedFilter">
        <option v-for="(filter) of filters" :value="filter.value">{{ filter.name }}</option>
      </select>
    </div>

    <ul class="uk-list message-configuration-list">
      <li class="uk-inline uk-width-1-1" v-for="(notif) of filteredNotifications" :style="{ 'border-color': notificationColor(notif) }">
        <h4 class="header">
          {{ _.capitalize(notif.notification_category) }}
          <small>({{ _.startCase(notif.notification_type) }})</small>
        </h4>
        <div class="title">
          {{ notif.notification_title }}
        </div>
        <div class="message">
          {{ notif.notification_description }}
        </div>
        <div class="uk-position-top-right uk-position-small">
          <a class="fas fa-pencil-alt esm-text-color-red uk-margin-small-right" @click="editNotification(notif)"></a>
          <a class="fas fa-times esm-text-color-red" @click="deleteNotification(notif)"></a>
        </div>
      </li>
    </ul>

    <%# <div v-if="!_.isEmpty(newNotification)"> %>
      <%= render partial: "notifications/mobile/new_notification" %>
    <%# </div> %>

    <%# <div v-if="!_.isEmpty(notificationBeingEdited)"> %>
      <%= render partial: "notifications/mobile/edit_notification" %>
    <%# </div> %>
  </div>
<% end %>