<%= 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 class="uk-width-1-1" 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(editRouteChannel) || _.isNull(editRouteChannel)">
      <h2>Manage routes</h2>
      <label>Please select a channel</label>
    </div>
    <div v-else>
      <h2>Managing routes for <span class="esm-text-color-toast-blue">{{ editRouteChannel.name }}</span></h2>
      <label>Selected channel:</label>
    </div>
    <div class="uk-width-1-2">
      <multiselect
                v-model="editRouteChannel"
                :options="channels"
                group-values="channels"
                group-label="category_name"
                placeholder="Type to search channels"
                track-by="id"
                label="name"
            >
        <span slot="noResult">No matches. Please adjust your search and try again</span>
      </multiselect>
    </div>
    <div class="uk-margin-top" v-if="editRouteChannel">
      <h3 v-if="_.isEmpty(availableRouteData)">
        There are no routes for this channel
        <br>
        <small>To route notifications to this channel, please use the "Create new route" button above</small>
      </h3>
      <div class="uk-child-width-1-2" uk-grid v-else>
        <div v-for="routeData of availableRouteData" :key="`route-${routeData.user.id}`">
          <%= render partial: "#{view_path}/manage_routes_card" %>
        </div>
      </div>
    </div>
  </div>
  <%= render partial: "#{view_path}/new_route_modal", locals: local_assigns %>
<% end %>