{# plugins/snmp/templates/snmp/index.html #}
{% extends "base.html" %}
{% block title %}SNMP — Steward{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
  <h1 class="page-title" style="margin:0;">SNMP Devices</h1>
  <span style="font-size:0.8rem;color:var(--text-dim);">{{ devices|length }} device(s) configured</span>
</div>

{% if not devices %}
<div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;">
  No SNMP devices configured. Add devices to <code>plugin.yaml</code>.
</div>
{% else %}

{% for device in devices %}
<div class="card" style="margin-bottom:1rem;">
  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem;">
    <h2 style="margin:0;font-size:1rem;font-weight:600;">{{ device.name }}</h2>
    <span style="font-size:0.78rem;color:var(--text-dim);">{{ device.host }}</span>
    {% if device.readings %}
    <span style="font-size:0.75rem;color:var(--green);margin-left:auto;">&#9679; reachable</span>
    {% else %}
    <span style="font-size:0.75rem;color:var(--text-dim);margin-left:auto;">&#9675; no data yet</span>
    {% endif %}
    <a href="/plugins/snmp/device/{{ device.name }}" class="btn btn-ghost" style="font-size:0.78rem;padding:0.2rem 0.6rem;">History</a>
  </div>

  {% if device.readings %}
  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0.75rem;">
    {% for oid_cfg in device.oids %}
    {% set label = oid_cfg.label if oid_cfg.label else oid_cfg.oid %}
    {% set val = device.readings.get(label) %}
    <div style="background:var(--bg-alt);border-radius:6px;padding:0.6rem 0.9rem;">
      <div style="font-size:0.72rem;color:var(--text-dim);margin-bottom:0.2rem;font-family:monospace;">{{ label }}</div>
      {% if val is not none %}
      <div style="font-size:1.1rem;font-weight:600;font-variant-numeric:tabular-nums;">
        {% if val >= 1000000 %}{{ "%.2f"|format(val / 1000000) }}<span style="font-size:0.75rem;color:var(--text-muted);">M</span>
        {% elif val >= 1000 %}{{ "%.1f"|format(val / 1000) }}<span style="font-size:0.75rem;color:var(--text-muted);">K</span>
        {% else %}{{ "%.4g"|format(val) }}{% endif %}
      </div>
      {% else %}
      <div style="font-size:0.85rem;color:var(--text-dim);">—</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p style="font-size:0.85rem;color:var(--text-muted);margin:0;">
    No readings yet — waiting for next poll cycle.
  </p>
  {% endif %}
</div>
{% endfor %}

{% endif %}
{% endblock %}