<!-- Pack search results partial (HTMX) -->
<% if (!packs || packs.length === 0) { %>
  <div class="text-gray-500 text-sm p-4">No packs found. Try a different search.</div>
<% } else { %>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
    <% packs.forEach(function(p) { %>
      <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 p-3 cursor-pointer hover:border-cyan-500 transition"
           onclick="selectPack('<%= provider %>', '<%= p.id %>')">
        <div class="flex gap-3">
          <% if (p.thumbnail) { %>
            <img src="<%= p.thumbnail %>" alt="" class="w-12 h-12 rounded object-cover shrink-0">
          <% } else { %>
            <div class="w-12 h-12 rounded bg-gray-700 flex items-center justify-center text-gray-500 shrink-0">📦</div>
          <% } %>
          <div class="min-w-0">
            <div class="font-medium text-sm truncate"><%= p.name %></div>
            <div class="text-xs text-gray-500 truncate"><%= (p.summary || '').substring(0, 80) %></div>
            <div class="flex gap-2 mt-1 text-[10px]">
              <% if (p.modLoader && p.modLoader !== 'unknown') { %>
                <span class="bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded"><%= p.modLoader %></span>
              <% } %>
              <% if (p.mcVersions && p.mcVersions.length > 0) { %>
                <span class="bg-gray-700 text-gray-300 px-1.5 py-0.5 rounded"><%= p.mcVersions[0] %></span>
              <% } %>
              <span class="text-gray-600">⬇ <%= (p.downloadCount || 0).toLocaleString() %></span>
            </div>
          </div>
        </div>
      </div>
    <% }) %>
  </div>
<% } %>
