From 7800557b88e587c8a8ad0153db3ebb0af4776ef7 Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Wed, 25 Feb 2026 23:25:08 +0100
Subject: [PATCH] Update filter to include manufacturer and series.

---
 portfolio/templates/model-kits.html | 218 ++++++++++++++++++++++++++--
 1 file changed, 204 insertions(+), 14 deletions(-)

diff --git a/portfolio/templates/model-kits.html b/portfolio/templates/model-kits.html
index 17a75c7..1b56a51 100644
--- a/portfolio/templates/model-kits.html
+++ b/portfolio/templates/model-kits.html
@@ -1,8 +1,9 @@
 <hr/>
 
 <div class="filters">
-  <fieldset>
-    <legend>$filter$</legend>
+  <!-- Status -->
+  <fieldset class="filter-group" data-filter="status">
+    <legend>Status</legend>
     <label>
       <input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
       $filter-plamo-in-box$
@@ -20,13 +21,161 @@
       $filter-plamo-complete$
     </label>
   </fieldset>
+
+  <!-- Manufacturer -->
+  <fieldset class="filter-group" data-filter="manufacturer">
+    <legend>Manufacturer</legend>
+    <label>
+      <input class="me-2" type="checkbox" value="AZmodel" checked>
+      AZmodel
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Bandai" checked>
+      Bandai
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Bandai Spirits" checked>
+      Bandai Spirits
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Cavico" checked>
+      Cavico
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Eduard" checked>
+      Eduard
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Finemolds" checked>
+      Finemolds
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Flame Toys" checked>
+      Flame Toys
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Fujimi" checked>
+      Fujimi
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Hasegawa" checked>
+      Hasegawa
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Italeri" checked>
+      Italeri
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Kotobukiya" checked>
+      Kotobukiya
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="MiniArt" checked>
+      MiniArt
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
+      Moderoid - Good Smile Company
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Ōtaki" checked>
+      Ōtaki
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Revell" checked>
+      Revell
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Tamiya" checked>
+      Tamiya
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Thunder Model" checked>
+      Thunder Model
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Wave Corporation" checked>
+      Wave Corporation
+    </label>
+  </fieldset>
+
+  <!-- Series -->
+  <fieldset class="filter-group" data-filter="series">
+    <legend>Series</legend>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam" checked>
+      Mobile Suit Gundam
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam 0080: War in the Pocket" checked>
+      Mobile Suit Gundam 0080: War in the Pocket
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam 0083: Stardust Memory" checked>
+      Mobile Suit Gundam 0083: Stardust Memory
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam: Char's Counterattack" checked>
+      Mobile Suit Gundam: Char's Counterattack
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam GQuuuuuuX" checked>
+      Mobile Suit Gundam GQuuuuuuX
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam Iron Blooded Orphans" checked>
+      Mobile Suit Gundam Iron Blooded Orphans
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED" checked>
+      Mobile Suit Gundam SEED
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Destiny" checked>
+      Mobile Suit Gundam SEED Destiny
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Freedom" checked>
+      Mobile Suit Gundam SEED Freedom
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam the Witch from Mercury" checked>
+      Mobile Suit Gundam the Witch from Mercury
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam Unicorn" checked>
+      Mobile Suit Gundam Unicorn
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Gundam ZZ" checked>
+      Mobile Suit Gundam ZZ
+    </label>
+        <label>
+      <input class="me-2" type="checkbox" value="Mobile Suit Zeta Gundam" checked>
+      Mobile Suit Zeta Gundam
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Mobile Fighter G Gundam" checked>
+      Mobile Fighter G Gundam
+    </label>
+    <label>
+      <input class="me-2" type="checkbox" value="Gundam Build Fighters Try" checked>
+      Gundam Build Fighters Try
+    </label>
+  </fieldset>
+</div>
+
+<div class="mt-2">
+  <button id="clear-filters" type="button" class="btn btn-sm btn-outline-secondary">
+    Clear
+  </button>
 </div>
 
 <hr/>
 
 <div class="row row-cols-md-1 row-cols-lg-2 row-cols-xxl-3 g-4 p-1">
     $for(kits)$
-    <div class="col kit" data-status="$status$">
+    <div class="col kit" data-status="$status$" data-manufacturer="$manufacturer$" data-series="$series$">
       <div class="card h-100 mb-3" style="max-width: 500px; min-width: 300px;">
         <div class="row g-0">
           <a href="$url$"><h5 class="card-title text-center mt-1">$title$</h5></a>
@@ -77,11 +226,17 @@ document.addEventListener("DOMContentLoaded", function () {
     const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
     const kits = document.querySelectorAll(".kit");
 
-    // Count by status.
+    // Count meta data.
     const counts = {};
     kits.forEach(kit => {
         const status = kit.dataset.status;
         counts[status] = (counts[status] || 0) + 1;
+
+        const manufacturer = kit.dataset.manufacturer;
+        counts[manufacturer] = (counts[manufacturer] || 0) + 1;
+
+        const series = kit.dataset.series;
+        counts[series] = (counts[series] || 0) + 1;
     });
 
     // Update each filter label with the count.
@@ -90,7 +245,7 @@ document.addEventListener("DOMContentLoaded", function () {
           const value = checkbox.value;
           const count = counts[value] || 0;
 
-          // Update label text
+          // Update label text.
           const label = checkbox.parentElement;
           const textNode = label.childNodes[label.childNodes.length - 1];
 
@@ -98,20 +253,55 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     function updateFilter() {
-        const selected = Array.from(checkboxes)
-            .filter(cb => cb.checked)
-            .map(cb => cb.value);
+        const groups = document.querySelectorAll(".filter-group");
+
+        // Get all checked checkboxes across all groups.
+        const allChecked = document.querySelectorAll(
+            ".filter-group input:checked"
+        );
+
+        // If nothing is selected anywhere, then hide everything.
+        if (allChecked.length === 0) {
+            kits.forEach(kit => {
+                kit.style.display = "none";
+            });
+            return;
+        }
 
         kits.forEach(kit => {
-            const status = kit.dataset.status;
-            if (selected.includes(status)) {
-                kit.style.display = "";
-            } else {
-                kit.style.display = "none";
-            }
+            let visible = true;
+
+            groups.forEach(group => {
+                const filterName = group.dataset.filter;
+
+                const selected = Array.from(
+                    group.querySelectorAll("input:checked")
+                ).map(cb => cb.value);
+
+                const kitValue = kit.dataset[filterName];
+
+                // OR inside group
+                if (selected.length > 0 && !selected.includes(kitValue)) {
+                    visible = false;
+                }
+            });
+
+            kit.style.display = visible ? "" : "none";
         });
     }
 
     checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
+
+    // Clear button.
+    const clearButton = document.getElementById("clear-filters");
+
+    clearButton.addEventListener("click", function () {
+        // Uncheck all checkboxes.
+        checkboxes.forEach(cb => {
+            cb.checked = false;
+        });
+        // Update the visible kits.
+        updateFilter();
+    });
 });
 </script>
\ No newline at end of file