From 92783eb1b7b469a186ea6e5ac193bc4d4fd6a2a5 Mon Sep 17 00:00:00 2001
From: Greg <gregman@livingonlinenow.com>
Date: Sun, 25 May 2025 21:08:44 +0200
Subject: [PATCH] feat: add list template with category tabs

---
 .../{arcane copy.md => white-lotus.md}        |  0
 layouts/_default/list.html                    | 32 ++++++++++++-------
 2 files changed, 20 insertions(+), 12 deletions(-)
 rename content/tvseries/{arcane copy.md => white-lotus.md} (100%)

diff --git a/content/tvseries/arcane copy.md b/content/tvseries/white-lotus.md
similarity index 100%
rename from content/tvseries/arcane copy.md
rename to content/tvseries/white-lotus.md
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index eefc513..db15491 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -30,8 +30,8 @@ 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);
-  
+  const allCards = Array.from(cardsContainer.children); // These are the <a> elements
+
   // Get the current section and section-to-category mappings
   const currentSection = tabsContainer.getAttribute('data-current-section');
   let sectionMappings = {};
@@ -40,16 +40,16 @@ document.addEventListener('DOMContentLoaded', function() {
   } catch (e) {
     console.error('Error parsing section mappings:', e);
   }
-  
+
   // Map the current section to its corresponding category
   const currentCategory = sectionMappings[currentSection] || null;
-  
+
   // Get all category values from the tabs
   const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
 
   // Create and prepend the "All" tab
   const allTab = document.createElement('div');
-  allTab.className = 'tab'; // Will be set to active by activateTabAndFilter
+  allTab.className = 'tab';
   allTab.textContent = 'All';
   allTab.setAttribute('data-tab', 'all');
   tabsContainer.prepend(allTab);
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', function() {
   // Function to activate a tab and filter cards
   function activateTabAndFilter(selectedCategory) {
     console.log('Filtering by category:', selectedCategory);
-    
+
     // Update active state for all tabs
     document.querySelectorAll('#tabs .tab').forEach(t => {
       if (t.getAttribute('data-tab') === selectedCategory) {
@@ -69,15 +69,23 @@ document.addEventListener('DOMContentLoaded', function() {
 
     // Filter cards
     let visibleCount = 0;
-    allCards.forEach(card => {
+    allCards.forEach(cardLinkElement => { // Renamed 'card' to 'cardLinkElement' for clarity
+      const cardDiv = cardLinkElement.querySelector('.card'); // Get the nested <div class="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
+      }
+
       if (selectedCategory === 'all') {
-        card.style.display = '';
+        cardLinkElement.style.display = '';
         visibleCount++;
       } else {
-        const cardCategory = card.getAttribute('data-category');
-        console.log('Card category:', cardCategory, 'Selected:', selectedCategory);
+        const cardCategory = cardDiv.getAttribute('data-category'); // Get category from the .card div
+        console.log('Card element:', cardLinkElement, 'Card div:', cardDiv, 'Card category:', cardCategory, 'Selected:', selectedCategory);
         const isVisible = (cardCategory === selectedCategory);
-        card.style.display = isVisible ? '' : 'none';
+        cardLinkElement.style.display = isVisible ? '' : 'none';
         if (isVisible) visibleCount++;
       }
     });
@@ -86,7 +94,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // 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)) {