{# plugins/unifi/templates/unifi/widget.html #}

{# Active alarms #}
{% for al in active_alarms %}
<div style="display:flex;justify-content:space-between;font-size:0.8rem;color:var(--red);padding:0.15rem 0;">
  <span>&#9888; {{ al.alarm_key }}</span>
  <span style="color:var(--text-dim);font-size:0.75rem;">alarm</span>
</div>
{% endfor %}
{# Offline device alerts #}
{% for d in offline_devices %}
<div style="display:flex;justify-content:space-between;font-size:0.8rem;color:var(--red);padding:0.15rem 0;">
  <span>&#9888; {{ d.name or d.mac }}</span>
  <span>offline</span>
</div>
{% endfor %}
{% if active_alarms or offline_devices %}<div style="height:0.4rem;"></div>{% endif %}

{% if latest_wan %}
<div class="ping-row">
  <div class="ping-meta">
    <span class="ping-name" style="font-size:0.8rem;">WAN</span>
  </div>
  <div style="flex:1;display:flex;gap:1.5rem;font-size:0.82rem;font-variant-numeric:tabular-nums;">
    <span style="color:{% if latest_wan.is_up %}var(--green){% else %}var(--red){% endif %};">
      {% if latest_wan.is_up %}Up{% else %}Down{% endif %}
    </span>
    {% if latest_wan.latency_ms is not none %}
    <span>
      <span style="color:var(--text-muted);">lat</span>
      <span style="margin-left:0.2rem;{% if latest_wan.latency_ms > 100 %}color:var(--red){% elif latest_wan.latency_ms > 50 %}color:var(--yellow){% endif %};">
        {{ "%.0f"|format(latest_wan.latency_ms) }}ms
      </span>
    </span>
    {% endif %}
    {% if latest_wan.rx_bytes_rate is not none %}
    <span>
      <span style="color:var(--text-muted);">&#8595;</span>
      {% set bps = latest_wan.rx_bytes_rate %}
      {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }}MB/s
      {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }}KB/s
      {% else %}{{ "%.0f"|format(bps) }}B/s{% endif %}
    </span>
    <span>
      <span style="color:var(--text-muted);">&#8593;</span>
      {% set bps = latest_wan.tx_bytes_rate %}
      {% if bps >= 1048576 %}{{ "%.1f"|format(bps / 1048576) }}MB/s
      {% elif bps >= 1024 %}{{ "%.0f"|format(bps / 1024) }}KB/s
      {% else %}{{ "%.0f"|format(bps) }}B/s{% endif %}
    </span>
    {% endif %}
  </div>
</div>
{% endif %}

{% if latest_clients %}
<div class="ping-row">
  <div class="ping-meta">
    <span class="ping-name" style="font-size:0.8rem;">Clients</span>
  </div>
  <div style="flex:1;display:flex;gap:1rem;font-size:0.82rem;">
    <span style="font-weight:600;">{{ latest_clients.total_clients }}</span>
    <span style="color:var(--text-muted);">{{ latest_clients.wireless_clients }}w / {{ latest_clients.wired_clients }}e</span>
  </div>
</div>
{% endif %}

{% if top_clients %}
<div style="margin-top:0.4rem;border-top:1px solid var(--border);padding-top:0.4rem;">
  {% for c in top_clients %}
  <div class="ping-row" style="padding:0.1rem 0;">
    <div class="ping-meta" style="min-width:0;flex:1;">
      <span style="font-size:0.78rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ c.hostname }}</span>
    </div>
    <div style="font-size:0.78rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-muted);">
      {% set total_bps = c.tx_rate + c.rx_rate %}
      <span style="color:var(--text-muted);">&#8595;</span>
      {% set rx = c.rx_rate %}
      {% if rx >= 1048576 %}{{ "%.1f"|format(rx / 1048576) }}M
      {% elif rx >= 1024 %}{{ "%.0f"|format(rx / 1024) }}K
      {% else %}{{ "%.0f"|format(rx) }}B{% endif %}
      <span style="color:var(--text-muted);margin-left:0.4rem;">&#8593;</span>
      {% set tx = c.tx_rate %}
      {% if tx >= 1048576 %}{{ "%.1f"|format(tx / 1048576) }}M
      {% elif tx >= 1024 %}{{ "%.0f"|format(tx / 1024) }}K
      {% else %}{{ "%.0f"|format(tx) }}B{% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{% if not latest_wan and not latest_clients and not active_alarms and not offline_devices %}
<p class="empty" style="padding:0.5rem 0;font-size:0.85rem;">No UniFi data yet.</p>
{% endif %}