{% comment %}
  Skeleton card grid — used as an HTMX placeholder while results load.

  Example usage inside a page:
    <div id="results"
         hx-get="{{% url 'some:view' %}}"
         hx-trigger="load"
         hx-swap="innerHTML"
         data-announce="Results updated">
      {{% include "components/skeleton_cards.html" %}}
    </div>

  The `.skeleton-host` visibility rule in input.css only shows placeholders
  while the parent hx-target has the .htmx-request class.
{% endcomment %}
<div class="skeleton-host">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    {% for i in "xxxxxx" %}
    <div class="skeleton-card">
      <div class="skeleton-line-sm mb-3"></div>
      <div class="skeleton-title mb-2"></div>
      <div class="skeleton-line mb-1.5"></div>
      <div class="skeleton-line w-5/6 mb-4"></div>
      <div class="flex items-center gap-2">
        <div class="skeleton h-6 w-14 rounded-full"></div>
        <div class="skeleton h-6 w-20 rounded-full"></div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>