<div class="mx-auto flex flex-wrap justify-center mb-4 px-6">
  <div class="text-center w-full max-w-lg mx-auto">
    <h1 class="text-2xl font-bold mb-1 text-gray-900">Visual Search Results</h1>
    <div class="flex justify-between items-center mt-2 mb-4">
      <span class="text-gray-600 text-sm font-medium">
        <% if @post_file_fingerprints.any? %>
          <span class="bg-blue-100 text-blue-700 px-2 py-0.5 rounded-md font-semibold">
            <%= @post_file_fingerprints.size %>
          </span> similar images found
        <% else %>
          No matches found
        <% end %>
      </span>
      <%= link_to "New Search", visual_search_domain_posts_path, class: "text-white hover:text-white transition-colors duration-200 text-sm font-semibold bg-blue-600 hover:bg-blue-700 px-3 py-1.5 rounded-md shadow-sm" %>
    </div>
    <% if @uploaded_image_data_uri.present? %>
      <div class="mx-auto mb-6 bg-white p-3 rounded-lg border border-gray-300 shadow-sm text-center">
        <h3 class="text-sm font-medium text-gray-700 mb-2">Your search image:</h3>
        <div class="flex justify-center items-center">
          <img src="<%= @uploaded_image_data_uri %>" alt="Uploaded image" class="max-h-[180px] rounded-lg border border-gray-300 object-contain shadow-sm" />
        </div>
      </div>
    <% end %>
    <% if @post_file_fingerprints.empty? %>
      <div class="bg-blue-50 text-blue-800 p-4 rounded-lg border border-blue-300 shadow-sm mx-auto max-w-lg">
        <p class="mb-1 font-medium">No similar images found</p>
        <p class="text-sm text-blue-700">Try adjusting the similarity threshold to a higher value.</p>
      </div>
    <% end %>
  </div>
  <% if @post_file_fingerprints.any? %>
    <div class="mx-2">
      <div class="flex flex-wrap gap-3 justify-center">
        <% @post_file_fingerprints.each do |post_file_fingerprint| %>
          <% post_file = post_file_fingerprint.fingerprint.post_file %>
          <% post = post_file.post %>
          <% similarity_percentage = post_file_fingerprint.similarity_percentage %>
          <div class="flex flex-col h-fit rounded-md border border-gray-300 bg-white shadow hover:shadow-md transition-shadow duration-300 overflow-hidden">
            <div class="flex justify-between items-center border-b border-gray-200 p-2 bg-gray-50 gap-2">
              <div class="flex items-center">
                <%= render "domain/posts/inline_postable_domain_link", post: post %>
              </div>
              <div class="<%= match_badge_classes(similarity_percentage) %> ml-auto rounded-full font-bold text-xs px-2 py-1 shadow-sm">
                <%= similarity_percentage %>%
              </div>
            </div>
            <% if thumbnail = thumbnail_for_post_path(post) %>
              <div class="flex items-center justify-center p-2 border-b border-gray-200 bg-white w-full">
                <%= link_to domain_post_path(post), class: "transition-transform duration-300 " do %>
                  <%= image_tag thumbnail,
                              class: "rounded-lg border max-h-[180px] max-w-[180px] border-gray-300 object-contain shadow-sm",
                              alt: post.title.presence || "Untitled Post" %>
                <% end %>
              </div>
            <% end %>
            <div class="flex flex-col justify-between">
              <h2 class="p-2 text-center text-base font-medium text-gray-800 truncate">
                <%= link_to post.title.presence || "Untitled Post", domain_post_path(post), class: "text-blue-700 hover:text-blue-800 transition-colors duration-200" %>
              </h2>
              <div class="px-2 pb-2 text-xs text-gray-600 mt-auto">
                <div class="flex justify-between items-center flex-wrap gap-1">
                  <span class="flex items-center gap-0.5">
                    <% if creator = post.primary_creator_for_view %>
                      <span class="text-gray-500 italic">by</span>
                      <%= render "domain/has_description_html/inline_link_domain_user", user: creator, visual_style: "sky-link", size: "small" %>
                    <% elsif creator = post.primary_creator_name_fallback_for_view %>
                      <span class="text-gray-500 italic">by</span> <%= creator %>
                    <% end %>
                  </span>
                  <span class="font-medium">
                    <% if post.created_at %>
                      <span class="text-gray-500"><i class="far fa-clock mr-1"></i></span> <%=
                        post.posted_at.present? ?
                        time_ago_in_words(post.posted_at) :
                        time_ago_in_words(post.created_at)
                      %> ago
                    <% end %>
                  </span>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>
</div>
