{# plugins/snmp/templates/snmp/device.html #}
{% extends "base.html" %}
{% block title %}SNMP — {{ device_name }} — Fabled Scryer{% endblock %}
{% block content %}
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap;">
  <a href="/plugins/snmp/" style="color:var(--text-muted);font-size:0.85rem;">&#8592; SNMP</a>
  <h1 class="page-title" style="margin:0;">{{ device_name }}</h1>
  <span style="font-size:0.8rem;color:var(--text-dim);">{{ device.host }}</span>
  <div style="margin-left:auto;display:flex;gap:0.5rem;">
    {% for h in [1, 6, 24, 168] %}
    <a href="?hours={{ h }}"
       class="btn btn-ghost"
       style="font-size:0.78rem;padding:0.2rem 0.6rem;{% if hours == h %}background:var(--accent);color:#fff;border-color:var(--accent);{% endif %}">
      {% if h < 24 %}{{ h }}h{% elif h == 24 %}24h{% else %}7d{% endif %}
    </a>
    {% endfor %}
  </div>
</div>

{% if oid_labels %}
<div class="card">
  <canvas id="snmp-chart" style="width:100%;max-height:320px;"></canvas>
</div>

<script>
(function(){
  const raw = {{ history_json | safe }};
  const labels = {{ oid_labels | tojson }};
  const palette = ["#6060c0","#e07040","#40b080","#c040c0","#4080e0","#e0c040","#c08040"];

  // Collect all unique timestamps, sorted
  const tsSet = new Set();
  for (const pts of Object.values(raw)) {
    for (const [ts] of pts) tsSet.add(ts);
  }
  const allTs = Array.from(tsSet).sort();

  if (allTs.length < 2) {
    document.getElementById("snmp-chart").parentElement.innerHTML =
      '<p style="color:var(--text-muted);padding:1rem;">Not enough data for a chart yet.</p>';
    return;
  }

  const datasets = [];
  labels.forEach((label, i) => {
    const pts = raw[label] || [];
    const map = Object.fromEntries(pts.map(([ts, v]) => [ts, v]));
    datasets.push({
      label,
      data: allTs.map(ts => map[ts] ?? null),
      borderColor: palette[i % palette.length],
      backgroundColor: "transparent",
      borderWidth: 1.5,
      pointRadius: 0,
      tension: 0.2,
      spanGaps: true,
    });
  });

  const ctx = document.getElementById("snmp-chart").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: { labels: allTs.map(ts => ts.substring(11, 16)), datasets },
    options: {
      responsive: true,
      interaction: { mode: "index", intersect: false },
      plugins: {
        legend: { position: "top", labels: { color: "#aaa", boxWidth: 12 } },
        tooltip: { backgroundColor: "#1e1e2e", titleColor: "#ccc", bodyColor: "#aaa" },
      },
      scales: {
        x: { ticks: { color: "#888", maxTicksLimit: 12 }, grid: { color: "#2a2a3a" } },
        y: { ticks: { color: "#888" }, grid: { color: "#2a2a3a" } },
      },
    },
  });
})();
</script>
{% else %}
<div class="card" style="color:var(--text-muted);text-align:center;padding:2rem;">
  No OIDs configured for this device.
</div>
{% endif %}
{% endblock %}