{% extends "base.html" %}

{% block title %}Threat Dashboard — SentinelAI{% endblock %}
{% block meta_description %}Review privacy-safe phishing and scam scan results by risk level, score, and explanation.{% endblock %}

{% block content %}
<section class="page-hero section-pad-sm">
  <div class="container">
    <span class="eyebrow">Dashboard</span>
    <h1 class="page-title mt-3">Threat scan history</h1>
    <p class="hero-copy">Monitor risk levels, review explanations, and identify items that need human verification.</p>
  </div>
</section>
<section class="section-pad">
  <div class="container">
    <div class="row g-3 mb-4">
      <div class="col-md-4"><div class="metric-tile"><span>Total scans</span><strong>{{ total_scans }}</strong></div></div>
      <div class="col-md-4"><div class="metric-tile"><span>Average risk</span><strong>{{ avg_score }}/100</strong></div></div>
      <div class="col-md-4"><div class="metric-tile"><span>High-risk items</span><strong>{{ high_risk_count }}</strong></div></div>
    </div>
    <div class="surface-card p-0 overflow-hidden">
      {% if scans %}
      <div class="table-responsive">
        <table class="table table-dark table-hover align-middle mb-0 app-table">
          <thead>
            <tr>
              <th>Risk</th>
              <th>Type</th>
              <th>Preview</th>
              <th>Verdict</th>
              <th>Created</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for scan in scans %}
            <tr>
              <td><span class="badge risk-{{ scan.risk_badge_class }}">{{ scan.risk_score }}/100</span></td>
              <td>{{ scan.get_scan_type_display }}</td>
              <td class="preview-cell">{{ scan.target_preview }}</td>
              <td>{{ scan.verdict }}</td>
              <td>{{ scan.created_at|date:"M j, Y H:i" }}</td>
              <td><a class="btn btn-sm btn-ghost" href="{% url 'scan_detail' scan.pk %}">Review</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="empty-state text-center p-5">
        <div class="empty-icon" aria-hidden="true">◇</div>
        <h2>No detections yet</h2>
        <p>Use the scanner to create your first privacy-safe result.</p>
        <a class="btn btn-primary-neo" href="{% url 'home' %}#scanner">Run first scan</a>
      </div>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}