<% content_for :head do %>
  <style>
    .grid-cell {
      padding: 0.25rem;
      border-right: 1px solid #e2e8f0;
    }
    .grid-cell:last-child {
      padding-left: 0;
      padding-right: 1rem;
      border-right: none;
    }
    .grid-cell:first-child {
      padding-left: 1rem;
    }
    .grid-row:hover .grid-cell {
      background-color: #f1f5f9;
    }
  </style>
<% end %>
<div class="w-full max-w-2xl mx-auto mt-4 text-center sm:mt-6">
  <% index_type_header_partial = "domain/posts/index_type_headers/#{@posts_index_view_config.index_type_header}" %>
  <%= render partial: index_type_header_partial, locals: { user: @user, params: params, posts: @posts } %>
  <div class="mt-4 flex justify-center gap-4">
    <% if params[:view] == "table" %>
      <%= link_to domain_posts_path(view: "gallery"), class: "text-blue-600 hover:text-blue-800" do %>
        <i class="fas fa-th-large"></i> Gallery View
      <% end %>
    <% else %>
      <%= link_to domain_posts_path(view: "table"), class: "text-blue-600 hover:text-blue-800" do %>
        <i class="fas fa-table"></i> Table View
      <% end %>
    <% end %>
    <%= link_to visual_search_domain_posts_path, class: "text-blue-600 hover:text-blue-800" do %>
      <i class="fas fa-search"></i> Visual Search
    <% end %>
  </div>
</div>
<% if @posts_index_view_config.show_domain_filters %>
  <%= render partial: "domain_filter_controls" %>
<% end %>
<%= render partial: "shared/pagination_controls", locals: { collection: @posts } %>
<% if params[:view] == "table" %>
  <div
    class="mx-auto grid grid-cols-[auto_1fr_auto_auto_auto] border-b border-slate-300 text-sm"
  >
    <div class="grid-row contents">
      <div class="grid-cell text-center font-semibold">Thumbnail</div>
      <div class="grid-cell text-left font-semibold">Title</div>
      <div class="grid-cell text-center font-semibold">Artist</div>
      <div class="grid-cell text-center font-semibold">Source</div>
      <div class="grid-cell text-right font-semibold">Posted</div>
    </div>
    <div class="col-span-full border-b border-slate-300"></div>
    <% @posts.each do |post| %>
      <%= render partial: "as_table_row_item", locals: { post: post } %>
    <% end %>
  </div>
<% else %>
  <div class="mx-auto flex flex-wrap justify-center">
    <% @posts.each do |post| %>
      <%= render partial: "as_gallery_item", locals: { post: post } %>
    <% end %>
  </div>
<% end %>
<%= render partial: "shared/pagination_controls", locals: { collection: @posts } %>
