{% from "partials/_macros.html" import card_header %}

{% set verdict_cls = {
  'malicious':  'bg-red-900/40 text-red-300 border border-red-900/60',
  'suspicious': 'bg-amber-900/40 text-amber-300 border border-amber-900/60',
  'unknown':    'bg-slate-700/40 text-slate-300 border border-slate-600',
  'benign':     'bg-emerald-900/30 text-emerald-300 border border-emerald-900/50',
} %}

<div class="bg-slate-900 border border-slate-800 rounded-lg p-5">
  {{ card_header("network flows — tcpdump aggregator") }}
  {% if flows %}
    <table class="w-full text-xs">
      <thead>
        <tr class="text-slate-500 uppercase tracking-wider text-[10px]">
          <th class="text-left  font-semibold pb-2">verdict</th>
          <th class="text-left  font-semibold pb-2">proto</th>
          <th class="text-left  font-semibold pb-2">destination</th>
          <th class="text-left  font-semibold pb-2">port / service</th>
          <th class="text-right font-semibold pb-2">packets</th>
          <th class="text-left  font-semibold pb-2 w-1/3">why</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-800/80">
        {% for f in flows %}
          <tr class="hover:bg-slate-800/40 transition-colors">
            <td class="py-2">
              {% if f.verdict %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px]
                             font-semibold uppercase tracking-wider
                             {{ verdict_cls.get(f.verdict, verdict_cls['unknown']) }}">
                  {{ f.verdict }}{% if f.confidence is not none %}
                    <span class="ml-1 opacity-70">{{ '%.0f' % (f.confidence * 100) }}%</span>
                  {% endif %}
                </span>
              {% else %}
                <span class="text-slate-600 text-[10px] uppercase tracking-wider">—</span>
              {% endif %}
            </td>
            <td class="py-2 text-slate-400 font-mono uppercase">{{ f.proto }}</td>
            <td class="py-2 text-slate-200 font-mono">{{ f.dst_ip }}</td>
            <td class="py-2 text-slate-400 font-mono">
              {{ f.dst_port }}{% if f.service %} <span class="text-slate-500">({{ f.service }})</span>{% endif %}
            </td>
            <td class="py-2 text-right text-slate-300 font-mono">{{ f.packets }}</td>
            <td class="py-2 text-slate-400 line-clamp-2">{{ f.reasoning }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <div class="text-slate-500 italic">
      no network flows yet — the tcpdump aggregator needs root (run the
      monitor with <span class="font-mono">sudo</span>) and a capture window to elapse.
    </div>
  {% endif %}
</div>