<div
  class="m-4 flex h-fit flex-col rounded-lg border border-slate-300 bg-slate-50 shadow-sm"
>
  <div class="flex justify-between border-b border-slate-300 p-4">
    <%= render "domain/posts/inline_postable_domain_link", post: post %>
  </div>
  <div class="flex items-center justify-center p-4 border-b border-slate-300">
    <% if (thumbnail_file = gallery_file_for_post(post)) && (thumbnail_path = thumbnail_for_post_path(post)) %>
      <%= link_to domain_post_path(post) do %>
        <%= image_tag thumbnail_path,
                      class:
                        "max-h-[300px] max-w-[300px] rounded-md border border-slate-300 object-contain shadow-md",
                      alt: post.title_for_view %>
      <% end %>
    <% elsif file_info = gallery_file_info_for_post(post)  %>
      <div class="flex items-center border border-slate-200 rounded-md px-3 py-2 bg-slate-100 shadow-sm">
        <i class="fas fa-file-alt text-slate-400 mr-2"></i>
        <span class="text-sm text-slate-500 italic"><%= file_info %>, <%= gallery_file_size_for_post(post) %></span>
      </div>
    <% else %>
      <span class="text-sm text-slate-500 italic">No file available</span>
    <% end %>
  </div>
  <div class="">
    <h2 class="p-2 text-center text-lg">
      <%= link_to title_for_post_model(post), domain_post_path(post), class: "blue-link" %>
    </h2>
    <div class="px-4 pb-4 text-sm text-slate-500">
      <div class="flex justify-between gap-2">
        <% if @posts_index_view_config.show_creator_links %>
          <% if creator = post.primary_creator_for_view %>
            <span class="flex gap-1 items-center">
              <span class="text-slate-500 italic text-sm">by</span>
              <%= render "domain/has_description_html/inline_link_domain_user", user: creator, visual_style: "sky-link", size: "small" %>
            </span>
          <% elsif creator = post.primary_creator_name_fallback_for_view %>
            <%= creator %>
          <% end %>
        <% end %>
        <span class="flex-grow text-right">
          <% if (faved_at = post.user_post_fav&.faved_at) && (time = faved_at.time) %>
            <span class="flex items-center gap-1 justify-end">
              <span
                title="<%= time&.in_time_zone&.strftime("%Y-%m-%d %I:%M:%S %p %Z") %>"
              ><%= time_ago_in_words_no_prefix(time) %> ago</span>
              <div class="relative group">
                <i class="fas <%= faved_at_type_icon(faved_at.type) %>"></i>
                <div class="absolute bottom-full right-0 mb-2 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
                  <%= faved_at_type_tooltip(faved_at.type) %>
                </div>
              </div>
            </span>
          <% elsif post.posted_at %>
            <%= time_ago_in_words_no_prefix(post.posted_at) %> ago
          <% end %>
        </span>
      </div>
    </div>
  </div>
</div>
