Add pagination, device detail unassign-all, and batch install with slot limit

templates/device_detail.html

@@ -197,27 +197,73 @@ function addInstallRow() {
   {% else %}
     <p class="text-muted">No batteries installed.</p>
   {% endif %}
+  {% if installed %}
+  <form class="inline" method="post"
+        action="{{ url_for('device_unassign_all', device_id=device.id) }}"
+        data-confirm="Unassign all batteries from {{ device.name }}?"
+        data-confirm-ok="Unassign" data-confirm-class="btn-warning"
+        style="margin-top:0.5rem;">
+    <input type="hidden" name="next" value="{{ url_for('device_detail', device_id=device.id) }}#installed">
+    <button class="btn btn-sm btn-warning" type="submit">Unassign All</button>
+  </form>
+  {% endif %}
 </div>
 
 <div class="card">
-  <h2>Install Specific Battery{% if device.battery_size %} <small class="text-muted" style="font-weight:normal;font-size:0.8rem;">({{ device.battery_size }} only)</small>{% endif %}</h2>
+  <h2>Install Specific Batteries{% if device.battery_size %} <small class="text-muted" style="font-weight:normal;font-size:0.8rem;">({{ device.battery_size }} only)</small>{% endif %}</h2>
   {% if available_batteries %}
-  <form method="post" action="{{ url_for('device_install_one', device_id=device.id) }}">
-    <div class="form-group">
-      <label for="battery_id">Battery</label>
-      <select name="battery_id" id="battery_id">
-        <option value="">— select —</option>
-        {% for b in available_batteries %}
-        <option value="{{ b.id }}">{{ b.label }} — {{ b.brand }}
-          {%- if b.size %} {{ b.size }}{% endif %}
-          {%- if b.notes %} ({{ b.notes }}){% endif %}</option>
-        {% endfor %}
-      </select>
+  <form method="post" action="{{ url_for('device_install_batch', device_id=device.id) }}">
+    <div style="margin-bottom:0.5rem;">
+      <label style="font-size:0.85rem;cursor:pointer;">
+        <input type="checkbox" id="select-all-avail" onchange="toggleAllAvail(this)"> Select all
+      </label>
     </div>
-    <button class="btn btn-primary" type="submit">Install</button>
+    <div style="max-height:200px;overflow-y:auto;border:1px solid #cbd5e1;border-radius:4px;padding:0.4rem 0.6rem;">
+      {% for b in available_batteries %}
+      <div>
+        <label style="font-size:0.9rem;cursor:pointer;">
+          <input type="checkbox" name="battery_ids" value="{{ b.id }}">
+          {{ b.label }} — {{ b.brand }}{% if b.battery_percentage is not none %} ({{ b.battery_percentage }}%){% endif %}
+        </label>
+      </div>
+      {% endfor %}
+    </div>
+    <button class="btn btn-sm btn-primary" type="submit" style="margin-top:0.5rem;">Install Selected</button>
   </form>
+  <script>
+  var FREE_SLOTS = {{ device.battery_slots - device.installed_count() }};
+  var checkedQueue = [];
+
+  document.querySelectorAll('input[name="battery_ids"]').forEach(function(cb) {
+    cb.addEventListener('change', function() {
+      if (cb.checked) {
+        checkedQueue.push(cb);
+        if (checkedQueue.length > FREE_SLOTS) {
+          var oldest = checkedQueue.shift();
+          oldest.checked = false;
+        }
+      } else {
+        checkedQueue = checkedQueue.filter(function(c) { return c !== cb; });
+      }
+      document.getElementById('select-all-avail').checked = false;
+    });
+  });
+
+  function toggleAllAvail(masterCb) {
+    var all = Array.from(document.querySelectorAll('input[name="battery_ids"]'));
+    if (masterCb.checked) {
+      checkedQueue = [];
+      all.forEach(function(c) { c.checked = false; });
+      all.slice(0, FREE_SLOTS).forEach(function(c) { c.checked = true; checkedQueue.push(c); });
+      if (all.length > FREE_SLOTS) masterCb.checked = false;
+    } else {
+      all.forEach(function(c) { c.checked = false; });
+      checkedQueue = [];
+    }
+  }
+  </script>
   {% else %}
-    <p class="text-muted">No available batteries.</p>
+    <p class="text-muted">No compatible batteries available.</p>
   {% endif %}
 </div>