MyFavStuff5/layouts/_default/index.html

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

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

      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 (index.html): 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 (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.');

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