{{ define "main" }}
<div class="tabs" id="tabs">
  {{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
  {{ range $i, $cat := $categories }}
    <div class="tab{{ if eq $i 0 }} active{{ end }}" data-tab="{{ $cat }}">{{ $cat }}</div>
  {{ end }}
</div>
<div class="cards" id="cards">
  {{ $current := "Books" }}
  {{ range where .Site.RegularPages ".Params.category" $current }}
    {{ partial "card.html" . }}
  {{ end }}
</div>
<script>
// Simple tab switching (client-side, not Hugo)
document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab');
  const cards = document.getElementById('cards');
  const allCards = Array.from(cards.children);
  tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      tabs.forEach(t => t.classList.remove('active'));
      this.classList.add('active');
      const cat = this.getAttribute('data-tab');
      allCards.forEach(card => {
        card.style.display = card.innerHTML.includes(`category=\"${cat}\"`) ? '' : 'none';
      });
    });
  });
});
</script>
{{ end }}