{% extends "base.html" %}
{# One fleet device: identity, health, and the tools its kind gets (a switch
   its ports, a radio its stations, a router its routes). Reads the fleet
   API's cached data; a Refresh asks the device again, read-only. The only
   write to a device is a switch port action, dry-run first. #}
{% block title %}Device{% endblock %}
{% block page_id %}device{% endblock %}
{% block head %}
<style>
  .v-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
  .v-head h1 { margin-right: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .v-head h1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .v-crumb { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
  .v-metric { display: flex; align-items: center; gap: 10px; }
  .v-metric b { font-size: 1.1rem; min-width: 52px; font-variant-numeric: tabular-nums; }
  .v-strip { display: block; width: 100%; height: 22px; border-radius: 6px; background: var(--bg-3); }
  .v-port { cursor: pointer; }
  .v-port td { font-family: var(--font); }
  .v-port:hover td { background: var(--bg-3); }
</style>
{% endblock %}
{% block content %}
<div id="v-root" data-device-id="{{ device_id }}"></div>
{% endblock %}
{% block scripts %}
<script src="{{ aida_rel('static/js/device.js') }}"></script>
{% endblock %}