Add sub-component support via self-referential device hierarchy

templates/device_detail.html

@@ -2,6 +2,12 @@
 {% block title %}{{ device.name }} — Battery Tracker{% endblock %}
 
 {% block content %}
+{% if device.parent %}
+<div style="margin-bottom:0.5rem;font-size:0.9rem;">
+  <a href="{{ url_for('device_detail', device_id=device.parent.id) }}">&larr; {{ device.parent.name }}</a>
+  <span class="text-muted"> / {{ device.name }}</span>
+</div>
+{% endif %}
 <h1>{{ device.name }}</h1>
 
 <div class="card" style="position:relative;">
@@ -63,6 +69,12 @@
       <td style="border:none;">{{ device.notes }}</td>
     </tr>
     {% endif %}
+    {% if device.parent %}
+    <tr>
+      <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">Part of</td>
+      <td style="border:none;"><a href="{{ url_for('device_detail', device_id=device.parent.id) }}">{{ device.parent.name }}</a></td>
+    </tr>
+    {% endif %}
     {% if ha_enabled and device.ha_entity_id %}
     <tr>
       <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Live %</td>
@@ -82,6 +94,27 @@
   </table>
 </div>
 
+{% if device.children or not device.is_subcomponent() %}
+<div class="card">
+  {% if device.children %}
+  <h2>Sub-components</h2>
+  <div style="display:flex;gap:0.75rem;flex-wrap:wrap;margin-bottom:0.75rem;">
+    {% for child in device.children %}
+    <a href="{{ url_for('device_detail', device_id=child.id) }}"
+       style="display:block;padding:0.6rem 0.9rem;border:1px solid var(--border);border-radius:6px;text-decoration:none;min-width:140px;background:var(--bg-card);">
+      <strong>{{ child.name }}</strong><br>
+      <small class="text-muted">{{ child.installed_count() }}/{{ child.battery_slots }} slots &middot; {{ child.battery_size }}{% if child.ha_entity_id %} &middot; HA{% endif %}</small>
+    </a>
+    {% endfor %}
+  </div>
+  {% else %}
+  <h2>Sub-components</h2>
+  <p class="text-muted" style="margin-bottom:0.75rem;">No sub-components. Batteries are tracked at the device level.</p>
+  {% endif %}
+  <a class="btn btn-sm btn-secondary" href="{{ url_for('device_add') }}?parent_id={{ device.id }}">+ Add Sub-component</a>
+</div>
+{% endif %}
+
 <div class="card">
   <h2>Install Batteries</h2>
   {% set free_slots = device.battery_slots - device.installed_count() %}
@@ -401,6 +434,19 @@ function addInstallRow() {
       <label for="edit-notes">Notes</label>
       <textarea id="edit-notes" name="notes">{{ device.notes or '' }}</textarea>
     </div>
+    {% if not device.has_children() %}
+    <div class="form-group">
+      <label for="edit-parent">Part of Device (optional)</label>
+      <select id="edit-parent" name="parent_id">
+        <option value="">— none (top-level device) —</option>
+        {% for d in device_list_all|default([]) %}
+          {% if d.id != device.id and not d.is_subcomponent() %}
+          <option value="{{ d.id }}" {% if device.parent_id == d.id %}selected{% endif %}>{{ d.name }}</option>
+          {% endif %}
+        {% endfor %}
+      </select>
+    </div>
+    {% endif %}
     {% if ha_enabled %}
     <div class="form-group">
       <label for="edit-ha-entity">Home Assistant Entity ID</label>
@@ -426,6 +472,9 @@ function addInstallRow() {
   <h2>Delete Device</h2>
   <p style="margin-bottom:1rem;" class="text-muted">
     Deleting this device will unassign all installed batteries and mark them available.
+    {% if device.has_children() %}
+    Sub-components ({{ device.children|map(attribute='name')|join(', ') }}) will become independent devices.
+    {% endif %}
   </p>
   <form method="post" action="{{ url_for('device_delete', device_id=device.id) }}">
     <button class="btn btn-danger" type="submit">Delete {{ device.name }}</button>