MyFavStuff5/layouts/_default/list.html

{{ 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.');

    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;
      }

      if (selectedCategory === 'all') {
        cardLinkElement.style.display = '';
        visibleCount++;
      } else {
        const cardCategoryAttr = cardDiv.getAttribute('data-category');
        const sCat = selectedCategory ? selectedCategory : 'null_or_empty';
        const cCat = cardCategoryAttr ? cardCategoryAttr : 'null_or_empty';
        console.log(
          `FUNC activateTabAndFilter: Comparing: cardCategory='${cCat}' (length ${cCat.length})` +
          ` vs selectedCategory='${sCat}' (length ${sCat.length})` +
          ` for card titled: '${cardDiv.querySelector('.card-title') ? cardDiv.querySelector('.card-title').textContent.trim() : 'N/A'}'`
        );
        const isVisible = (cardCategoryAttr === selectedCategory);
        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.');

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