{% extends "base.html" %}
{% from "partials/piechart.html" import piechart %}

{% block title %}Trends — Tsume{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1>Verdict Trends</h1>
    <p>Aggregate view across every recorded lookup</p>
  </div>
</div>

{% if error %}
<div class="panel">
  <div class="panel__body">
    <div class="alert alert--error">Could not load trends: {{ error }}</div>
  </div>
</div>
{% elif not stats or stats.total == 0 %}
<div class="panel">
  <div class="empty-state">
    <h3>No lookups yet</h3>
    <p>Trends build up as you run lookups — from here or the CLI.</p>
    <a class="button button--primary" href="/lookup">Run your first lookup</a>
  </div>
</div>
{% else %}

{% if stats.disagreements %}<a href="#disagreements-list" class="stat-hero panel">{% else %}<div class="stat-hero panel">{% endif %}
  <div class="stat-hero__label">Provider disagreements</div>
  <div class="stat-hero__value">{{ stats.disagreements | length }}</div>
  <p class="stat-hero__desc">Same IOC, different verdicts across providers — the signal this dashboard exists to surface, not noise to average away.</p>
{% if stats.disagreements %}</a>{% else %}</div>{% endif %}

<div class="stat-grid">
  <a href="#verdict-distribution" class="panel stat-tile">
    <div class="stat-tile__label">Total lookups</div>
    <div class="stat-tile__value">{{ stats.total }}</div>
  </a>
  <a href="#by-provider" class="panel stat-tile">
    <div class="stat-tile__label">Providers used</div>
    <div class="stat-tile__value">{{ stats.by_provider | length }}</div>
  </a>
  <a href="#by-ioc-type" class="panel stat-tile">
    <div class="stat-tile__label">IOC types seen</div>
    <div class="stat-tile__value">{{ stats.by_ioc_type | length }}</div>
  </a>
</div>

<div class="panel" id="verdict-distribution">
  <div class="panel__header"><h2>Verdict / severity distribution</h2></div>
  <div class="panel__body">
    {{ piechart(verdict_slices, badge_labels=True) }}
  </div>
</div>

<div class="panel" id="by-provider">
  <div class="panel__header"><h2>By provider</h2></div>
  <div class="panel__body">
    {{ piechart(provider_slices) }}
  </div>
</div>

<div class="panel" id="by-ioc-type">
  <div class="panel__header"><h2>By IOC type</h2></div>
  <div class="panel__body">
    {{ piechart(ioc_type_slices) }}
  </div>
</div>

{% if stats.disagreements %}
<div class="panel" id="disagreements-list">
  <div class="panel__header">
    <h2>Provider disagreements</h2>
    <span class="helper-text">Same IOC, different verdicts across providers</span>
  </div>
  <div class="panel__body">
    {% for d in stats.disagreements %}
    <div class="bar-row" style="grid-template-columns: 1fr auto;">
      <a class="mono" href="/?search={{ d.ioc_value }}">{{ d.ioc_value }}</a>
      <span class="helper-text">{{ d.distinct_verdicts }} distinct verdicts</span>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% endif %}
{% endblock %}