{#
  village_cards.html — HTMX card grid fragment.
  Served at GET /villages/cards/ for HTMX infinite scroll / filter updates.
  Also used standalone for the page_builder VillageUpdatesBlock.
#}



<div class="flex flex-wrap gap-2 mb-6" id="village-filters">
  <a href="/villages/cards/"
     class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
            bg-primary text-white">
    All
  </a>
  
    <a href="?category=governance"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Governance
    </a>
  
    <a href="?category=development"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Development
    </a>
  
    <a href="?category=culture"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Culture &amp; Heritage
    </a>
  
    <a href="?category=health"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Health &amp; Welfare
    </a>
  
    <a href="?category=education"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Education
    </a>
  
    <a href="?category=agriculture"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Agriculture
    </a>
  
    <a href="?category=environment"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Environment
    </a>
  
    <a href="?category=other"
       class="px-3 py-1.5 rounded-full text-sm font-medium transition-colors
              bg-surface-variant text-on-surface/70 hover:bg-primary/10">
      Other
    </a>
  
</div>



<div id="village-card-grid"
     class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  
    <div class="col-span-full py-16 text-center text-on-surface/50">
      <span class="material-symbols-outlined text-5xl mb-3 block">search_off</span>
      <p class="text-lg font-medium">No reports found.</p>
      <p class="text-sm mt-1">Try a different category or check back soon.</p>
    </div>
  
</div>