{# monitors/widget.html — dashboard widget: unified monitor summary #}
{% if not monitor_data and up == 0 and down == 0 and pending == 0 %}
<div style="color:var(--text-muted);font-size:0.85rem;padding:0.5rem 0;">
  No monitors configured. <a href="/monitors/">Add monitors →</a>
</div>
{% else %}

<div style="display:flex;gap:1rem;margin-bottom:0.65rem;flex-wrap:wrap;">
  {% if up %}
  <div><span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--green);">{{ up }}</span>
    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">up</span></div>
  {% endif %}
  {% if down %}
  <div><span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--red);">{{ down }}</span>
    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">down</span></div>
  {% endif %}
  {% if pending %}
  <div><span style="font-size:1.4rem;font-weight:700;line-height:1;color:var(--text-dim);">{{ pending }}</span>
    <span style="font-size:0.78rem;color:var(--text-muted);margin-left:0.25rem;">pending</span></div>
  {% endif %}
</div>

<div style="display:grid;gap:3px;">
  {% for d in monitor_data %}
  {% set latest = d.latest %}
  <div style="display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;padding:0.15rem 0;">
    {% if not latest %}<span class="dot dot-dim"></span>
    {% elif latest.is_up %}<span class="dot dot-up"></span>
    {% else %}<span class="dot dot-down"></span>{% endif %}
    {% if d.monitor.host_id %}
    <a href="/hosts/{{ d.monitor.host_id }}" style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;text-decoration:none;">{{ d.monitor.name }}</a>
    {% else %}
    <span style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ d.monitor.name }}</span>
    {% endif %}
    {% if latest and latest.response_ms is not none %}
    <span style="font-size:0.72rem;font-family:ui-monospace,monospace;color:var(--text-muted);flex-shrink:0;">{{ "%.0f"|format(latest.response_ms) }}ms</span>
    {% elif latest and not latest.is_up %}
    <span style="font-size:0.72rem;color:var(--red);flex-shrink:0;">{{ latest.status_code or "down" }}</span>
    {% endif %}
  </div>
  {% endfor %}
</div>

{% endif %}