<div class="mb-6 bg-white shadow">
  <div class="mx-auto px-4 sm:px-6 lg:px-8">
    <div
      class="flex flex-col items-center justify-between gap-4 py-4 sm:flex-row"
    >
      <!-- Domain Filters -->
      <div class="flex flex-wrap gap-2">
        <span class="my-auto font-medium text-gray-700">Sources:</span>
        <% active_sources = (params[:sources] || DomainSourceHelper.all_source_names).uniq %>
        <% DomainSourceHelper.all_source_names.each do |source| %>
          <% is_active = active_sources.include?(source) %>
          <% link_sources =
               (
                 if is_active
                   active_sources - [source]
                 else
                   active_sources + [source]
                 end
               ) %>
          <% posts_path_url =
               if DomainSourceHelper.has_all_sources?(link_sources)
                 domain_posts_path(view: params[:view])
               else
                 domain_posts_path(sources: link_sources, view: params[:view])
               end %>
          <%= link_to(
                source.titleize,
                posts_path_url,
                class:
                  "px-3 py-1 rounded-full text-sm #{is_active ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}",
              ) %>
        <% end %>
      </div>
      <!-- View Type Selector -->
      <div class="flex items-center gap-2">
        <span class="font-medium text-gray-700">View:</span>
        <%= link_to(
              domain_posts_path(view: "gallery", sources: params[:sources]),
              class:
                "px-3 py-1 rounded-full text-sm #{params[:view] != "table" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}",
            ) do %>
          <i class="fas fa-th-large mr-1"></i> Gallery
        <% end %>
        <%= link_to(
              domain_posts_path(view: "table", sources: params[:sources]),
              class:
                "px-3 py-1 rounded-full text-sm #{params[:view] == "table" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}",
            ) do %>
          <i class="fas fa-list mr-1"></i> Table
        <% end %>
      </div>
    </div>
  </div>
</div>
