{# unifi/widget_devices.html — dashboard widget: infrastructure devices #}
{% if not devices %}
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
  {% if type_filter != "all" %}No {{ type_filter }} devices found.{% else %}No devices found.{% endif %}
</div>
{% else %}

{% set online = devices | selectattr("state", "equalto", 1) | list %}
{% set offline = devices | rejectattr("state", "equalto", 1) | list %}

<div style="display:flex;gap:1rem;margin-bottom:0.75rem;">
  <div>
    <span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--green);">{{ online | length }}</span>
    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">online</span>
  </div>
  {% if offline %}
  <div>
    <span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--red);">{{ offline | length }}</span>
    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">offline</span>
  </div>
  {% endif %}
</div>

<div style="display:grid;gap:3px;">
  {% for d in devices %}
  <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;padding:0.15rem 0;">
    <span class="dot {% if d.state == 1 %}dot-up{% else %}dot-down{% endif %}"></span>
    <span style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
      {{ d.name or d.mac }}
    </span>
    <span style="font-size:0.72rem;color:var(--text-dim);flex-shrink:0;">{{ d.model or d.device_type or "" }}</span>
  </div>
  {% endfor %}
</div>

{% endif %}