From 7ec04f2b5c0a37acef0837ef78d803291d89b2bb Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Sun, 25 May 2025 21:18:55 +0200
Subject: [PATCH] feat: add list template with category tabs and dynamic
 content filtering

---
 layouts/_default/list.html | 106 +++++++++++++++++++++++--------------
 1 file changed, 65 insertions(+), 41 deletions(-)

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 18a65c3..d9c1fa7 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -27,38 +27,58 @@
 </div>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-  const tabsContainer = document.getElementById('tabs');
-  const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML
-  const cardsContainer = document.getElementById('cards');
-  const allCards = Array.from(cardsContainer.children); // These are the <a> elements
+  console.log('SCRIPT: DOMContentLoaded event fired.');
 
-  // Get the current section and section-to-category mappings
-  const currentSection = tabsContainer.getAttribute('data-current-section');
-  let sectionMappings = {};
-  try {
-    sectionMappings = JSON.parse(tabsContainer.getAttribute('data-section-mappings'));
-  } catch (e) {
-    console.error('Error parsing section mappings:', e);
+  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);
   }
 
-  // Map the current section to its corresponding category
   const currentCategory = sectionMappings[currentSection] || null;
+  console.log('SCRIPT: currentCategory (mapped from currentSection):', currentCategory);
 
-  // Get all category values from the tabs
   const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
+  console.log('SCRIPT: knownCategories (from originalTabs):', knownCategories);
 
-  // Create and prepend the "All" tab
+  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 to activate a tab and filter cards
   function activateTabAndFilter(selectedCategory) {
-    console.log('Filtering by category:', selectedCategory);
+    console.log('FUNC activateTabAndFilter: Filtering by category:', selectedCategory);
 
-    // Update active state for all tabs
     document.querySelectorAll('#tabs .tab').forEach(t => {
       if (t.getAttribute('data-tab') === selectedCategory) {
         t.classList.add('active');
@@ -66,61 +86,65 @@ document.addEventListener('DOMContentLoaded', function() {
         t.classList.remove('active');
       }
     });
+    console.log('FUNC activateTabAndFilter: Active states updated for tabs.');
 
-    // Filter cards
     let visibleCount = 0;
-    allCards.forEach(cardLinkElement => { // Renamed 'card' to 'cardLinkElement' for clarity
-      const cardDiv = cardLinkElement.querySelector('.card'); // Get the nested <div class="card">
-      
+    allCards.forEach(cardLinkElement => {
+      const cardDiv = cardLinkElement.querySelector('.card');
       if (!cardDiv) {
-        console.warn('Card structure issue: .card div not found inside', cardLinkElement);
-        cardLinkElement.style.display = 'none'; // Hide if structure is wrong
-        return; // Skip this card
+        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 cardCategory = cardDiv.getAttribute('data-category'); // Get category from the .card div
-        
-        // Detailed log for comparison
+        const cardCategoryAttr = cardDiv.getAttribute('data-category');
         const sCat = selectedCategory ? selectedCategory : 'null_or_empty';
-        const cCat = cardCategory ? cardCategory : 'null_or_empty';
+        const cCat = cardCategoryAttr ? cardCategoryAttr : 'null_or_empty';
         console.log(
-          `Comparing: cardCategory='${cCat}' (length ${cCat.length})` + 
-          ` vs selectedCategory='${sCat}' (length ${sCat.length})` + 
+          `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 = (cardCategory === selectedCategory);
+        const isVisible = (cardCategoryAttr === selectedCategory);
         cardLinkElement.style.display = isVisible ? '' : 'none';
         if (isVisible) visibleCount++;
       }
     });
-    console.log('Visible cards after filtering:', visibleCount);
+    console.log('FUNC activateTabAndFilter: Visible cards after filtering:', visibleCount);
   }
 
-  // Determine initial category to display
   let initialCategoryToDisplay = 'all';
-
-  // If we're on a section page and we have a mapping for this section,
-  // use the corresponding category
   if (currentSection && currentCategory && knownCategories.includes(currentCategory)) {
     initialCategoryToDisplay = currentCategory;
-    console.log('Initial category set to', initialCategoryToDisplay, 'based on section', currentSection);
   }
+  console.log('SCRIPT: initialCategoryToDisplay determined as:', initialCategoryToDisplay);
 
-  // Attach click listeners to all tabs (including the new "All" tab)
-  document.querySelectorAll('#tabs .tab').forEach(tab => {
+  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.');
 
-  // Initial filter and active tab setup
+  console.log('SCRIPT: Calling activateTabAndFilter for initial page load with category:', initialCategoryToDisplay);
   activateTabAndFilter(initialCategoryToDisplay);
+  console.log('SCRIPT: Initial page load filtering complete.');
+
 });
 </script>
 {{ end }}