{{ 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">
  {{ $currentCat := .Title }}
  {{ range .Site.RegularPages }}
    {{ if and (.Params.category) (or (eq $currentCat "All") (eq .Params.category $currentCat)) }}
      {{ partial "card.html" . }}
    {{ end }}
  {{ end }}
</div>
<script>
// Tab switching with "All" default view
// (same as index.html)
document.addEventListener('DOMContentLoaded', function() {
  const tabs = document.querySelectorAll('.tab');
  const cards = document.getElementById('cards');
  const allCards = Array.from(cards.children);
  
  // Add an "All" tab at the beginning
  const tabsContainer = document.getElementById('tabs');
  const allTab = document.createElement('div');
  allTab.className = 'tab active';
  allTab.textContent = 'All';
  allTab.setAttribute('data-tab', 'all');
  tabsContainer.prepend(allTab);
  
  // Make other tabs inactive initially
  tabs.forEach(tab => tab.classList.remove('active'));
  
  // Add click handler for all tabs (including the new All tab)
  document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', function() {
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      this.classList.add('active');
      const cat = this.getAttribute('data-tab');
      
      allCards.forEach(card => {
        if (cat === 'all') {
          card.style.display = '';
        } else {
          // Add a data-category attribute to make filtering more reliable
          const category = card.getAttribute('data-category');
          card.style.display = (category === cat) ? '' : 'none';
        }
      });
    });
  });
});
</script>
{{ end }}