<%= tag.div id: "xm8-notification-routing", data: local_assigns, "v-cloak": true do %>
  <h1 class="uk-visible@m">
    XM8 Notification Routing
    <%= button_tag "Create new route", class: "uk-button uk-button-default uk-align-right uk-margin-remove-bottom", "uk-toggle": "target: #create-new-route-modal", style: "margin-top: 0.5em" %>
  </h1>
  <div v-show="!_.isEmpty(pendingRequests)">
    <h2>
      Pending routing requests
      <span class="uk-align-right">
        <%= button_tag "Decline all", class: "uk-button esm-button-danger", "@click": "ajaxUpdateAllRequests('decline')", ":disabled": "pendingRequestsInputDisabled" %>
        <%= button_tag "Accept all", class: "uk-button esm-button-confirm", "@click": "ajaxUpdateAllRequests('accept')", ":disabled": "pendingRequestsInputDisabled" %>
      </span>
    </h2>
    <ul class="uk-list message-configuration-list">
      <li v-for="request of pendingRequests" :key="`request-${request.user.id}-${request.server.id}-${request.channel.id}`" :style="{ 'border-color': request.color }">
        <%= render partial: "#{view_path}/pending_route_item" %>
      </li>
    </ul>
  </div>
  <div class="uk-width-1-1">
    <div v-if="_.isUndefined(editRouteCommunity) || _.isNull(editRouteCommunity)">
      <h2>Manage routes</h2>
      <label>Please select a Discord server</label>
    </div>
    <div v-else>
      <h2>Managing routes for <span class="esm-text-color-toast-blue">{{ editRouteCommunity.name }}</span></h2>
      <label>Selected Discord server:</label>
    </div>
    <div class="uk-width-1-2">
      <multiselect
                v-model="editRouteCommunity"
                :options="communities"
                placeholder="Type to search Discord servers"
                track-by="id"
                label="name"
                class="uk-width-1-1"
            >
        <span slot="noResult">No matches. Please adjust your search and try again</span>
      </multiselect>
    </div>
    <div class="uk-margin-top" v-if="editRouteCommunity">
      <h3 v-if="_.isEmpty(availableRouteData)">
        You are not routing any notifications to this Discord server
        <br>
        <small>To route notifications to this community, please use the "Create new route" button above</small>
      </h3>
      <div class="uk-child-width-1-2@l uk-child-width-1-1" uk-grid v-else>
        <div v-for="routeData of availableRouteData" :key="`route-${routeData.channel.id}`">
          <%= render partial: "#{view_path}/manage_routes_card" %>
        </div>
      </div>
    </h2>
  </div>
  <%= render "#{view_path}/new_route_modal", **local_assigns %>
<% end %>