<header class="mb-2 navbar navbar-expand-md navbar-dark bg-dark">
  <nav role="navigation" class="container">
    <span class="navbar-brand mb-0 h1">Exq</span>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav me-auto mb-lg-0">
        <li class="nav-item">
          <%= nav_link(@socket, "Dashboard", Routes.dashboard_path(@socket)) %>
        </li>
        <li class="nav-item">
          <%= nav_link(@socket, "Busy", Routes.busy_index_path(@socket)) %>
        </li>
        <li class="nav-item">
          <%= nav_link(@socket, "Queues", Routes.queue_index_path(@socket)) %>
        </li>
        <li class="nav-item">
          <%= nav_link(@socket, "Retries", Routes.retry_index_path(@socket)) %>
        </li>
        <li class="nav-item">
          <%= nav_link(@socket, "Scheduled", Routes.scheduled_index_path(@socket)) %>
        </li>
        <li class="nav-item">
          <%= nav_link(@socket, "Dead", Routes.dead_index_path(@socket)) %>
        </li>
        <%= if Application.get_env(:exq_ui, :exq_scheduler_name) do %>
          <li class="nav-item">
            <%= nav_link(@socket, "Recurring", Routes.recurring_index_path(@socket)) %>
          </li>
        <% end %>
      </ul>
    </div>
    <form class="d-flex align-items-center" phx-target="stats">
      <label for="refresh-interval" class="text-light col-auto me-2">Update every</label>
      <select
        name="refresh_interval"
        phx-hook="Refresh"
        id="refresh-interval"
        class="form-select"
        aria-label="Refresh Interval"
        phx-update="ignore"
      >
        <%= options_for_select([1, 2, 5, 10, 30], 5) %>
      </select>
    </form>
  </nav>
</header>
