{% extends "base.html" %}
{% block title %}Collector{% endblock %}
{% block content %}

<div class="page-header">
  <h1>Collector</h1>
  <p class="page-sub">Central monitoring for up to {{ max_devices }} Neto devices on this network</p>
</div>

{% if not lic or lic.state != 'active' %}
<div class="alert alert-warning">
  ⚠️ A valid licence is required to use the collector. <a href="/licence">Activate licence →</a>
</div>
{% else %}

<!-- Stats -->
<div class="stat-grid" style="grid-template-columns:repeat(3,1fr)">
  <div class="stat-card">
    <div class="stat-label">Devices</div>
    <div class="stat-value">{{ stats.total_devices }} / {{ max_devices }}</div>
    <div class="stat-sub">registered</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Active now</div>
    <div class="stat-value">{{ stats.active_devices }}</div>
    <div class="stat-sub">seen in last hour</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Tests today</div>
    <div class="stat-value">{{ stats.today_results }}</div>
    <div class="stat-sub">across all devices</div>
  </div>
</div>

<!-- Devices table -->
<div class="card">
  <div class="card-header">Devices</div>
  {% if devices %}
  <div class="table-wrap">
    <table>
      <thead><tr><th>Device</th><th>Status</th><th>IP</th><th>Last run</th><th>Avg download</th></tr></thead>
      <tbody>{{ dev_rows|safe }}</tbody>
    </table>
  </div>
  {% else %}
  <p style="color:var(--muted);font-size:14px">No devices connected yet. Add this Pi's API key to other Neto devices in their Settings page.</p>
  {% endif %}
</div>

<!-- Connection info -->
<div class="card">
  <div class="card-header">Connect other Pis to this collector</div>
  <p style="font-size:14px;color:var(--muted);margin-bottom:16px">
    On each other Neto Pi, go to <strong>Settings → Central collector</strong> and enter:
  </p>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
    <div>
      <div style="font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">Collector URL</div>
      <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-family:monospace;font-size:13px">
        http://{{ request.host.split(':')[0] }}:8080/collector/ingest
      </div>
    </div>
    <div>
      <div style="font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em">API key</div>
      <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-family:monospace;font-size:13px;word-break:break-all">
        {{ api_key }}
      </div>
    </div>
  </div>
  <p style="font-size:12px;color:var(--muted);margin-top:12px">
    ⚠️ Keep this API key private. Only share it with trusted Neto devices on your network.
  </p>
</div>

{% endif %}
{% endblock %}