{{ define "main" }}
<div class="tabs" id="tabs">
  {{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" "Restaurants" }}
  {{ 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">
  {{ range .Site.RegularPages }}
    {{ if .Params.category }}
      {{ partial "card.html" . }}
    {{ end }}
  {{ end }}
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('SCRIPT (index.html): DOMContentLoaded event fired.');

  const tabsContainer = document.getElementById('tabs');
  console.log('SCRIPT (index.html): tabsContainer:', tabsContainer);
  if (!tabsContainer) {
    console.error('SCRIPT ERROR (index.html): Could not find tabsContainer (#tabs). Stopping script.');
    return;
  }

  // Note: originalTabs in index.html are directly used, no section mapping needed here.
  const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab'));
  console.log('SCRIPT (index.html): originalTabs (from HTML):', originalTabs, 'Count:', originalTabs.length);

  const cardsContainer = document.getElementById('cards');
  console.log('SCRIPT (index.html): cardsContainer:', cardsContainer);
  if (!cardsContainer) {
    console.error('SCRIPT ERROR (index.html): Could not find cardsContainer (#cards). Stopping script.');
    return;
  }
  const allCards = Array.from(cardsContainer.children);
  console.log('SCRIPT (index.html): allCards (direct children of #cards):', allCards, 'Count:', allCards.length);

  console.log('SCRIPT (index.html): Creating and prepending "All" tab...');
  const allTab = document.createElement('div');
  allTab.className = 'tab'; // Active state will be set by activateTabAndFilter
  allTab.textContent = 'All';
  allTab.setAttribute('data-tab', 'all');
  tabsContainer.prepend(allTab);
  console.log('SCRIPT (index.html): "All" tab prepended:', allTab);

  // Make other tabs (from HTML) inactive initially as "All" will be default active
  originalTabs.forEach(tab => tab.classList.remove('active'));

  function activateTabAndFilter(selectedCategory) {
    console.log('FUNC activateTabAndFilter (index.html): Filtering by category:', selectedCategory);

    document.querySelectorAll('#tabs .tab').forEach(t => {
      if (t.getAttribute('data-tab') === selectedCategory) {
        t.classList.add('active');
      } else {
        t.classList.remove('active');
      }
    });
    console.log('FUNC activateTabAndFilter (index.html): Active states updated for tabs.');

    // Get the consumed filter status from window global
    const consumedFilter = window.currentConsumedFilter || 'consumed';
    console.log('FUNC activateTabAndFilter (index.html): Current consumed filter is:', consumedFilter);
    
    let visibleCount = 0;
    allCards.forEach(cardLinkElement => {
      const cardDiv = cardLinkElement.querySelector('.card');
      if (!cardDiv) {
        console.warn('FUNC activateTabAndFilter (index.html): Card structure issue: .card div not found inside', cardLinkElement);
        cardLinkElement.style.display = 'none';
        return;
      }

      // Check category visibility first
      let categoryVisible = false;
      if (selectedCategory === 'all') {
        categoryVisible = true;
      } else {
        const cardCategoryAttr = cardDiv.getAttribute('data-category');
        categoryVisible = (cardCategoryAttr === selectedCategory);
      }
      
      // Now check consumed status
      const cardData = cardLinkElement.querySelector('meta[name="card-data"]');
      let consumedStatus;
      if (cardData) {
        try {
          const cardDataObj = JSON.parse(cardData.getAttribute('content'));
          consumedStatus = cardDataObj.consumed;
        } catch (e) {
          console.warn('FUNC activateTabAndFilter (index.html): Error parsing card data:', e);
        }
      }
      
      // Determine visibility based on consumed filter
      let consumedVisible = true; // Default to true if no consumed status is specified
      
      if (consumedFilter === 'consumed') {
        // Show only consumed=true or consumed not specified
        consumedVisible = (consumedStatus !== false);
      } else if (consumedFilter === 'not-consumed') {
        // Show only consumed=false
        consumedVisible = (consumedStatus === false);
      }
      // If consumedFilter is 'all', then consumedVisible remains true
      
      // Final visibility is the combination of both filters
      const isVisible = categoryVisible && consumedVisible;
      cardLinkElement.style.display = isVisible ? '' : 'none';
      if (isVisible) visibleCount++;
    });
    
    console.log('FUNC activateTabAndFilter (index.html): Visible cards after filtering:', visibleCount);
  }

  // For index.html, the initial category is always 'all'.
  const initialCategoryToDisplay = 'all';
  console.log('SCRIPT (index.html): initialCategoryToDisplay determined as:', initialCategoryToDisplay);

  console.log('SCRIPT (index.html): Attaching click listeners to tabs...');
  const allTabsForListeners = document.querySelectorAll('#tabs .tab');
  console.log('SCRIPT (index.html): Found', allTabsForListeners.length, 'tabs to attach listeners to.');
  allTabsForListeners.forEach((tab, index) => {
    console.log(`SCRIPT (index.html): Attaching listener to tab ${index + 1}:`, tab);
    tab.addEventListener('click', function() {
      console.log('EVENT HANDLER (index.html): Tab clicked:', this);
      const categoryToFilter = this.getAttribute('data-tab');
      console.log('EVENT HANDLER (index.html): Category to filter (from data-tab):', categoryToFilter);
      if (!categoryToFilter) {
        console.error('EVENT HANDLER ERROR (index.html): data-tab attribute is missing or empty for the clicked tab:', this);
        return;
      }
      activateTabAndFilter(categoryToFilter);
    });
  });
  console.log('SCRIPT (index.html): Finished attaching click listeners.');

  console.log('SCRIPT (index.html): Calling activateTabAndFilter for initial page load with category:', initialCategoryToDisplay);
  activateTabAndFilter(initialCategoryToDisplay);
  console.log('SCRIPT (index.html): Initial page load filtering complete.');

  // Listen for consumed filter changes from the sidebar
  document.addEventListener('consumedFilterChanged', function(event) {
    console.log('EVENT (index.html): consumedFilterChanged received with filterType:', event.detail.filterType);
    // Re-apply the current category filter when the consumed filter changes
    const currentCategory = document.querySelector('#tabs .tab.active').getAttribute('data-tab');
    activateTabAndFilter(currentCategory);
  });

});
</script>
{{ end }}