{# http/widget.html — dashboard widget: HTTP 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="/plugins/http/">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 item in monitor_data %}
  {% set latest = item.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 %}
    <span style="flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
      {{ item.monitor.name }}
    </span>
    {% 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 "err" }}
    </span>
    {% endif %}
  </div>
  {% endfor %}
</div>

{% endif %}