candidates: visible native checkboxes + tiny JS counter

- checkbox: form-check-input (Bootstrap) rendered invisible outside
  .form-check -> native checkbox with explicit width/height
- tiny JS: badge #sel-count updates on change of any #bulk-form checkbox
- base.html: added {% block scripts %}
- verified: render (200 checkboxes), JS counter logic (node), service restarted

web/templates/base.html

@@ -26,5 +26,6 @@
 <div class="container-fluid mt-2 px-3">
   {% block content %}{% endblock %}
 </div>
+{% block scripts %}{% endblock %}
 </body>
 </html>

web/templates/candidates.html

@@ -85,8 +85,10 @@
                   {% if p.direction %}<span class="badge bg-light">{{ p.direction }}</span>{% endif %}
                 </span>
               </a>
-              <input class="form-check-input ms-auto mt-1" type="checkbox" name="ids" value="{{ p.id }}"
-                     form="bulk-form" {% if selected and selected.id == p.id %}checked{% endif %}>
+              <input type="checkbox" name="ids" value="{{ p.id }}" form="bulk-form"
+                     class="ms-auto flex-shrink-0"
+                     style="width:1.3em;height:1.3em;cursor:pointer;"
+                     {% if selected and selected.id == p.id %}checked{% endif %}>
             </div>
             {% endfor %}
           </div>
@@ -199,4 +201,19 @@
     </div>
   </div>
 </div>
+{% endblock %}
+{% block scripts %}
+<script>
+(function(){
+  var boxes = document.querySelectorAll('#bulk-form input[name="ids"]');
+  var badge = document.getElementById('sel-count');
+  function upd(){
+    var n = 0;
+    for (var i = 0; i < boxes.length; i++) if (boxes[i].checked) n++;
+    badge.textContent = n;
+  }
+  for (var i = 0; i < boxes.length; i++) boxes[i].addEventListener('change', upd);
+  upd();
+})();
+</script>
 {% endblock %}