<div class="flex-col gap-2 card" data-controller="expando">
  <div class="flex flex-col p-3">
    <div class="flex flex-col">
      <div class="text-gray-800 font-medium"><%= link_to result.conversation.title, [result.conversation] %></div>
      <% if result.conversation.summary.present? %>
        <div class="text-sm text-gray-600">
          <%= result.conversation.summary %>
          <% result.conversation.tags.each do |tag| %>
            <%= link_to("##{tag}", tag_path(tag)) %>&nbsp;
          <% end %>
        </div>
      <% end %>
      <div class="text-xs text-gray-500 mt-1 flex gap-2 items-center">
        <% if result.messages.any? %>
          <div class="text-gray-700 cursor-pointer" data-action="click->expando#toggle" data-collapsible=".result_messages">▶︎</div>
        <% end %>
        <%= result.conversation.created_at.strftime("%b %d, %Y") %> -
        <%= result.conversation.transcript.count %> messages
        <% if result.messages.any? %>
          (<%= pluralize result.messages.count, "hit" %>)
        <% end %>
      </div>
    </div>
  </div>
  <div class="result_messages expando-collapsed space-y-2 px-3 pb-3">
    <% result.messages.each do |message| %>
      <div class="text-sm text-gray-600 message rounded-md p-2 <%= message.role %> opacity-80 hover:opacity-100 sm:mr-[20%]">
        <%= highlight(message.content, @search.query) %>
        <%= link_to "link", [result.conversation, { message: message.id.split("-").last }] %>
      </div>
    <% end %>
  </div>
</div>
