<div data-live-poll-region id="filter">
  <div class="bg-light break-out">
    <h2 class="container-fluid pt-3 pb-2"><%= title %></h2>

    <%= form_with(url: "", method: :get, local: true, id: "filter_form", class: "container-fluid") do |form| %>
      <%= hidden_field_tag :poll, params[:poll] %>
      <%= hidden_field_tag :state, params[:state] %>
      <%= hidden_field_tag :locale, params[:locale] if params[:locale] %>
      <div class="d-flex flex-row w-100">
        <div class="me-2">
          <%= label_tag "job_queue_filter", "Queue name", class: "visually-hidden" %>
          <select name="queue_name" id="job_queue_filter" class="form-select form-select-sm">
            <option value="" <%= "selected='selected'" if params[:queue_name].blank? %>>All queues</option>

            <% filter.queues.each do |name, count| %>
              <option value="<%= name.to_param %>" <%= "selected='selected'" if params[:queue_name] == name %>><%= name %> (<%= number_with_delimiter(count) %>)</option>
            <% end %>
          </select>
        </div>

        <div class="me-2">
          <%= label_tag "job_class_filter", "Job name", class: "visually-hidden" %>
          <select name="job_class" id="job_class_filter" class="form-select form-select-sm">
            <option value="" <%= "selected='selected'" if params[:job_class].blank? %>>All jobs</option>

            <% filter.job_classes.each do |name, count| %>
              <option value="<%= name.to_param %>" <%= "selected='selected'" if params[:job_class] == name %>><%= name %> (<%= number_with_delimiter(count) %>)</option>
            <% end %>
          </select>
        </div>

        <div class="me-2 flex-fill">
          <%= label_tag "query", "Search", class: "visually-hidden" %>
          <%= search_field_tag "query", params[:query], class: "form-control form-control-sm", placeholder: "Search by class, job id, job params, and error text." %>
        </div>

        <div class="d-flex flex-col align-items-end">
          <div>
            <%= form.submit "Search", name: nil, class: "btn btn-primary btn-sm" %>
            <%= link_to filter.to_params(job_class: nil, state: nil, queue_name: nil, query: nil), class: "btn btn-secondary btn-sm" do %>
              Clear
            <% end %>
          </div>
        </div>
      </div>
    <% end %>

    <ul class="nav nav-tabs bg-light px-3 my-3">
      <li class="nav-item">
        <%= link_to "All", filter.to_params(state: nil), class: "nav-link #{"active" unless params[:state].present?}" %>
      </li>

      <% filter.states.each do |name, count| %>
        <li class="nav-item">
          <%= link_to filter.to_params(state: name), class: "nav-link #{"active" if params[:state] == name}" do %>
            <%= t(name, scope: 'good_job.status') %>
            <span class="badge bg-primary rounded-pill <%= "bg-secondary" if count == 0 %>"><%= number_with_delimiter(count) %></span>
          <% end %>
        </li>
      <% end %>
    </ul>
  </div>

  <%= javascript_tag nonce: true do %>
    document.addEventListener("DOMContentLoaded", () => {
      document.querySelectorAll("#job_class_filter, #job_queue_filter").forEach((filter) => {
        filter.addEventListener("change", () => {
          document.querySelector("#filter_form").submit();
        });
      })
    })
  <% end %>
</div>