<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>
      </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>
