More work on the management UI, multi printer is working, temps is sometimes working

Web UI Project/app/templates/_printer_card.html

@@ -0,0 +1,34 @@
+<div id="printer-{{ printer.id }}" class="p-6 rounded border border-slate-700 bg-slate-800 w-full h-fit">
+  <h2 class="text-xl font-bold mb-4 text-white" title="{{ printer.name }}">{{ printer.name }}</h2>
+  
+  <!-- Connect/Disconnect button -->
+  {% if printer.connected %}
+    <form
+      hx-post="/disconnect/{{ printer.id }}"
+      hx-target="#printer-{{ printer.id }}"
+      hx-swap="outerHTML"
+    >
+      <button class="w-full px-4 py-2 rounded bg-green-600 text-white hover:bg-red-600">
+        {{ printer.name }} is connected (Press to disconnect)
+      </button>
+    </form>
+
+    <!-- Live status panel -->
+    <div id="status-{{ printer.id }}" 
+         hx-post="/status/{{ printer.id }}" 
+         hx-trigger="every 500ms[!document.activeElement.matches('#status-{{ printer.id }} input')]"
+         hx-swap="outerHTML" 
+         class="mt-4">
+    </div>
+  {% else %}
+    <form
+      hx-post="/connect/{{ printer.id }}"
+      hx-target="#printer-{{ printer.id }}"
+      hx-swap="outerHTML"
+    >
+      <button class="w-full px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-500">
+        Connect to {{ printer.name }}
+      </button>
+    </form>
+  {% endif %}
+</div>