rental catalog with gallery and category sorting

content/catalog/index.md

@@ -17,7 +17,30 @@
         "deliveryPickup": "",
         "installBreakdown": "$200",
         "purchaseCost": "",
-        "cat": "Backdrops"
+        "cat": "Backdrops",
+        "gallery": [
+            {
+            "image": "https://placehold.co/300x200/"
+            },
+            {
+            "image": "https://placehold.co/200x200/"
+            },
+            {
+            "image": "https://placehold.co/400x200/"
+            },
+            {
+            "image": "https://placehold.co/300x200/"
+            },
+            {
+            "image": "https://placehold.co/200x200/"
+            },
+            {
+            "image": "https://placehold.co/400x200/"
+            },
+            {
+            "image": "https://placehold.co/400x600/"
+            }
+        ]
     },
     {
         "item": "12ft Round Arch",

themes/gallo/layouts/partials/rental-catalog.html

@@ -107,6 +107,20 @@
                 <h3 class="text-xl mb-2" id="modal-title">
                   <strong>{{ .item }}</strong>
                 </h3>
+                {{ if .gallery }}
+                <div
+                  class="mt-8 columns-1 gap-2 sm:columns-2 sm:gap-4 md:columns-3 lg:columns-4 [&>img:not(:first-child)]:mt-4"
+                >
+                  {{ range .gallery }}
+                  <img
+                    loading="lazy"
+                    class="rounded-lg hover:scale-110 ease-in-out duration-300 transition-all shadow-xl hover:shadow-2xl"
+                    src="{{ .image }}"
+                  />
+                  {{ end }}
+                </div>
+                {{ end }}
+
                 <div class="px-1 pt-4 w-full">
                   <div class="text-gray-800 text-base">
                     {{ if ne .quant "" }}
@@ -139,11 +153,6 @@
                       <strong>Purchase Cost:</strong>
                       <span>{{ .purchaseCost }}</span>
                     </div>
-                    {{ end }} {{ if ne .cat "" }}
-                    <div class="flex flex-row justify-between">
-                      <strong>Category:</strong>
-                      <span>{{ .cat }}</span>
-                    </div>
                     {{ end }}
                   </div>
                 </div>
@@ -171,6 +180,36 @@
     const closeButtons = document.querySelectorAll("#close-modal");
     const modals = document.querySelectorAll(".fixed");
 
+    function filterItems(category) {
+      console.log("Filtering items for category:", category);
+      const items = document.querySelectorAll(".grid > div");
+
+      items.forEach((item) => {
+        const itemCategory = item.querySelector(".bg-blue-100");
+        if (!itemCategory) return; // Skip if category not found
+
+        if (category === "" || itemCategory.textContent === category) {
+          item.classList.remove("hidden");
+        } else {
+          item.classList.add("hidden");
+          // Hide modal if it's open for an item that's now hidden
+          const modalId = item.id.replace("modal-", "");
+          const modal = document.getElementById(modalId);
+          if (modal) modal.classList.add("hidden");
+        }
+      });
+    }
+
+    const category = window.location.hash.substring(1);
+    console.log("Initial category:", category);
+    filterItems(category);
+
+    window.addEventListener("hashchange", function () {
+      const newCategory = window.location.hash.substring(1);
+      console.log("New category:", newCategory);
+      filterItems(newCategory);
+    });
+
     modalButtons.forEach((button) => {
       button.addEventListener("click", function (e) {
         e.preventDefault();
@@ -183,7 +222,8 @@
     closeButtons.forEach((button) => {
       button.addEventListener("click", function (e) {
         e.preventDefault();
-        modals.forEach((modal) => modal.classList.add("hidden"));
+        const modal = this.closest(".fixed");
+        modal.classList.add("hidden");
       });
     });
   });