From 408f30d574ea24c0fa8256269e150e0b123e9b1b Mon Sep 17 00:00:00 2001
From: Kevin Matsubara <kevin.matsubara@proton.me>
Date: Tue, 17 Feb 2026 23:25:03 +0100
Subject: [PATCH] Create a simple status filterable plamo kit page with
 checkboxes.

---
 portfolio/templates/model-kits.html | 59 ++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/portfolio/templates/model-kits.html b/portfolio/templates/model-kits.html
index 36897e9..d217878 100644
--- a/portfolio/templates/model-kits.html
+++ b/portfolio/templates/model-kits.html
@@ -1,6 +1,37 @@
+<hr/>
+
+<div class="filters">
+  <fieldset>
+    <legend>Filter by status</legend>
+
+    <label>
+      <input type="checkbox" value="Still in box" checked>
+      Still in box
+    </label>
+
+    <label>
+      <input type="checkbox" value="Building" checked>
+      Building
+    </label>
+
+    <label>
+      <input type="checkbox" value="Built" checked>
+      Built
+    </label>
+
+    <label>
+      <input type="checkbox" value="Complete" checked>
+      Complete
+    </label>
+
+  </fieldset>
+</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">
+    <div class="col kit" data-status="$status$">
       <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>
@@ -44,4 +75,28 @@
       </div>
     </div>
     $endfor$
-</div>
\ No newline at end of file
+</div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
+    const kits = document.querySelectorAll(".kit");
+
+    function updateFilter() {
+        const selected = Array.from(checkboxes)
+            .filter(cb => cb.checked)
+            .map(cb => cb.value);
+
+        kits.forEach(kit => {
+            const status = kit.dataset.status;
+            if (selected.includes(status)) {
+                kit.style.display = "";
+            } else {
+                kit.style.display = "none";
+            }
+        });
+    }
+
+    checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
+});
+</script>
\ No newline at end of file