updated interface

app/templates/devices/_card.html

@@ -0,0 +1,75 @@
+{% set state = device.current_state %}
+{% set controllable = device.is_controllable %}
+
+<div class="card border-0 rounded-4 h-100
+  {% if controllable %}
+    {% if state %}border-start border-3 border-{{ device.state_color }}
+    {% else %}border-start border-3 border-secondary{% endif %}
+  {% else %}border-start border-3 border-primary{% endif %}">
+
+  <div class="card-body p-3">
+    <!-- Icon + name row -->
+    <div class="d-flex align-items-start gap-3 mb-2">
+      <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
+           style="width:56px;height:56px;background:var(--bs-secondary-bg)">
+        <i class="bi {{ device.effective_icon }}"
+           style="font-size:1.8rem;
+             {% if controllable and state %}color:var(--bs-{{ device.state_color }}){% endif %}"></i>
+      </div>
+      <div class="flex-grow-1 min-w-0">
+        <div class="fw-semibold text-truncate">{{ device.name }}</div>
+        {% if device.description %}
+        <div class="text-secondary small text-truncate">{{ device.description }}</div>
+        {% endif %}
+        <div class="d-flex flex-wrap gap-1 mt-1">
+          {% if device.area %}
+          <span class="badge text-bg-secondary" style="font-size:.65rem">
+            <i class="bi bi-geo-alt me-1"></i>{{ device.area }}
+          </span>
+          {% endif %}
+          <span class="badge text-bg-secondary" style="font-size:.65rem">
+            {{ device.device_class | capitalize }}
+          </span>
+          {% if device.board %}
+          <span class="badge text-bg-secondary" style="font-size:.65rem">
+            <i class="bi bi-motherboard me-1"></i>{{ device.board.name }}
+            / {{ device.entity_type | capitalize }} {{ device.entity_num }}
+          </span>
+          {% else %}
+          <span class="badge text-bg-warning" style="font-size:.65rem">No board</span>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <!-- State + controls row -->
+    <div class="d-flex align-items-center justify-content-between mt-2">
+      <span class="badge device-state-badge text-bg-{{ device.state_color }}">
+        {{ device.state_label }}
+      </span>
+      <div class="d-flex gap-1">
+        {% if controllable and device.board %}
+        <button type="button"
+                class="btn btn-sm {% if state %}btn-{{ device.state_color }}{% else %}btn-outline-secondary{% endif %}"
+                onclick="deviceToggle(this, {{ device.id }})"
+                title="Toggle {{ device.name }}">
+          <i class="bi bi-power me-1"></i>{% if state %}ON{% else %}OFF{% endif %}
+        </button>
+        {% endif %}
+        {% if current_user.is_admin() %}
+        <a href="{{ url_for('devices.edit_device', device_id=device.id) }}"
+           class="btn btn-sm btn-outline-secondary" title="Edit">
+          <i class="bi bi-pencil"></i>
+        </a>
+        <form method="POST"
+              action="{{ url_for('devices.delete_device', device_id=device.id) }}"
+              onsubmit="return confirm('Delete device \'{{ device.name }}\'?')">
+          <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
+            <i class="bi bi-trash"></i>
+          </button>
+        </form>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>