Refactor item form visibility to data-attribute driven JS

Replace hardcoded id-based section lookup with declarative rules:
- data-show-category="games|books|films" on sections
- data-hide-status="unending" on individual fields

JS now has a single updateVisibility() that evaluates attributes.
Adding new conditions only requires touching HTML, not JS.

Also hides Progress and Total Hours for unending items.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backlogger/templates/backlogger/item_form.html

@@ -158,7 +158,7 @@
         {{ form.name.errors }}
       </div>
 
-      <div class="field">
+      <div class="field" data-hide-status="unending">
         <div class="progress-label">
           <label for="{{ form.progress_percent.id_for_label }}">Progress</label>
           <span class="progress-val" id="progress-display">{{ form.progress_percent.value|default:0|floatformat:0 }}%</span>
@@ -175,7 +175,7 @@
       </div>
 
       <!-- Games fields -->
-      <div id="section-games" class="cat-section" style="display:none">
+      <div class="cat-section" data-show-category="games">
         <hr class="section-divider">
         <div class="section-title">Games</div>
         <div class="two-col">
@@ -184,7 +184,7 @@
             {{ form.hours_played }}
             {{ form.hours_played.errors }}
           </div>
-          <div class="field">
+          <div class="field" data-hide-status="unending">
             <label>Total hours <span class="optional">optional</span></label>
             {{ form.total_hours }}
             {{ form.total_hours.errors }}
@@ -201,7 +201,7 @@
       </div>
 
       <!-- Books fields -->
-      <div id="section-books" class="cat-section" style="display:none">
+      <div class="cat-section" data-show-category="books">
         <hr class="section-divider">
         <div class="section-title">Books</div>
         <div class="two-col">
@@ -219,7 +219,7 @@
       </div>
 
       <!-- Films fields -->
-      <div id="section-films" class="cat-section" style="display:none">
+      <div class="cat-section" data-show-category="films">
         <hr class="section-divider">
         <div class="section-title">Films</div>
         <div class="two-col">
@@ -249,15 +249,24 @@
   const catSelect = document.getElementById('{{ form.category.id_for_label }}');
   const progressRange = document.getElementById('{{ form.progress_percent.id_for_label }}');
   const progressDisplay = document.getElementById('progress-display');
+  const itemStatus = '{{ item.status|default:"active" }}';
 
-  function updateSections() {
-    document.querySelectorAll('.cat-section').forEach(el => el.style.display = 'none');
-    const sec = document.getElementById('section-' + catSelect.value);
-    if (sec) sec.style.display = 'block';
+  function updateVisibility() {
+    const cat = catSelect.value;
+
+    // Show only the section matching the selected category
+    document.querySelectorAll('[data-show-category]').forEach(el => {
+      el.style.display = el.dataset.showCategory === cat ? 'block' : 'none';
+    });
+
+    // Hide fields that are not applicable for the current status
+    document.querySelectorAll('[data-hide-status]').forEach(el => {
+      el.style.display = el.dataset.hideStatus === itemStatus ? 'none' : '';
+    });
   }
 
-  catSelect.addEventListener('change', updateSections);
-  updateSections();
+  catSelect.addEventListener('change', updateVisibility);
+  updateVisibility();
 
   progressRange.addEventListener('input', function() {
     progressDisplay.textContent = Math.round(this.value) + '%';