{{ define "main" }}
{{/* Pass the current section to the JavaScript via data attributes */}}
{{/* Also add a data attribute mapping section names to category names */}}
<div class="tabs" id="tabs" 
     data-current-section="{{ .Section }}" 
     data-section-mappings='{
       "books": "Books",
       "movies": "Movies",
       "tvseries": "TV Series", 
       "recipes": "Recipes",
       "youtube": "YouTube",
       "music": "Music",
       "concerts": "Concerts",
       "restaurants": "Restaurants"
     }'>
  {{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" "Restaurants" }}
  {{ range $i, $cat := $categories }}
    <div class="tab" data-tab="{{ $cat }}">{{ $cat }}</div>
  {{ end }}
</div>

<div class="cards" id="cards">
  {{ range .Site.RegularPages }}
    {{ if not (eq .Params.draft true) }}
      {{ partial "card.html" . }}
    {{ end }}
  {{ end }}
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  console.log('SCRIPT: DOMContentLoaded event fired.');

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

  const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab'));
  console.log('SCRIPT: originalTabs (from HTML):', originalTabs, 'Count:', originalTabs.length);

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

  const currentSection = tabsContainer.getAttribute('data-current-section');
  console.log('SCRIPT: currentSection (from data-current-section):', currentSection);
  let sectionMappings = {};
  try {
    const mappingsAttr = tabsContainer.getAttribute('data-section-mappings');
    console.log('SCRIPT: data-section-mappings attribute:', mappingsAttr);
    if (mappingsAttr) {
      sectionMappings = JSON.parse(mappingsAttr);
    }
    console.log('SCRIPT: parsed sectionMappings:', sectionMappings);
  } catch (e) {
    console.error('SCRIPT ERROR: Error parsing section mappings:', e);
  }

  const currentCategory = sectionMappings[currentSection] || null;
  console.log('SCRIPT: currentCategory (mapped from currentSection):', currentCategory);

  const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
  console.log('SCRIPT: knownCategories (from originalTabs):', knownCategories);

  console.log('SCRIPT: Creating and prepending "All" tab...');
  const allTab = document.createElement('div');
  allTab.className = 'tab';
  allTab.textContent = 'All';
  allTab.setAttribute('data-tab', 'all');
  tabsContainer.prepend(allTab);
  console.log('SCRIPT: "All" tab prepended:', allTab);

  function activateTabAndFilter(selectedCategory) {
    console.log('FUNC activateTabAndFilter: 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: Active states updated for tabs.');

    // Get the consumed filter status from window global
    const consumedFilter = window.currentConsumedFilter || 'consumed';
    console.log('FUNC activateTabAndFilter: Current consumed filter is:', consumedFilter);
    
    let visibleCount = 0;
    allCards.forEach(cardLinkElement => {
      const cardDiv = cardLinkElement.querySelector('.card');
      if (!cardDiv) {
        console.warn('FUNC activateTabAndFilter: 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: 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: Visible cards after filtering:', visibleCount);
  }

  let initialCategoryToDisplay = 'all';
  if (currentSection && currentCategory && knownCategories.includes(currentCategory)) {
    initialCategoryToDisplay = currentCategory;
  }
  console.log('SCRIPT: initialCategoryToDisplay determined as:', initialCategoryToDisplay);

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

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

  // Listen for consumed filter changes from the sidebar
  document.addEventListener('consumedFilterChanged', function(event) {
    console.log('EVENT: consumedFilterChanged received in list.html 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 }}