{% extends "base.html" %}

{% block title %}Scan Result #{{ scan.pk }} — SentinelAI{% endblock %}
{% block meta_description %}Explainable AI cybersecurity result with risk score, flagged indicators, and recommended next actions.{% endblock %}

{% block content %}
<section class="page-hero section-pad-sm">
  <div class="container">
    <div class="d-flex flex-column flex-lg-row justify-content-between gap-4 align-items-lg-end">
      <div>
        <span class="eyebrow">Scan confirmation</span>
        <h1 class="page-title mt-3">{{ scan.verdict }}</h1>
        <p class="hero-copy">Result created {{ scan.created_at|date:"M j, Y H:i" }} using {{ scan.model_version }}.</p>
      </div>
      <a class="btn btn-primary-neo" href="{% url 'home' %}#scanner">Scan another item</a>
    </div>
  </div>
</section>
<section class="section-pad">
  <div class="container">
    <div class="row g-4">
      <div class="col-lg-5">
        <div class="surface-card p-4 p-md-5 text-center h-100">
          <div class="risk-meter detail mx-auto risk-ring-{{ scan.risk_badge_class }}">
            <span>{{ scan.risk_score }}</span>
            <small>risk / 100</small>
          </div>
          <span class="badge risk-{{ scan.risk_badge_class }} mt-4">{{ scan.get_risk_level_display }} risk</span>
          <dl class="scan-meta mt-4 text-start">
            <dt>Scan type</dt><dd>{{ scan.get_scan_type_display }}</dd>
            <dt>Sanitized preview</dt><dd>{{ scan.target_preview }}</dd>
            <dt>Content hash</dt><dd><code>{{ scan.content_hash|slice:":16" }}…</code></dd>
          </dl>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="surface-card p-4 p-md-5 mb-4">
          <div class="section-kicker">Why it was flagged</div>
          <h2>Explainable indicators</h2>
          <p class="text-muted-soft">{{ scan.explanation }}</p>
          <div class="indicator-list mt-4">
            {% for indicator in scan.indicators %}
            <article>
              <div>
                <strong>{{ indicator.label }}</strong>
                <p>{{ indicator.detail }}</p>
              </div>
              <span>+{{ indicator.weight }}</span>
            </article>
            {% endfor %}
          </div>
        </div>
        <div class="surface-card p-4 p-md-5">
          <div class="section-kicker">Recommended response</div>
          <h2>Next actions</h2>
          <ul class="action-list mt-3">
            {% for action in scan.recommended_actions %}
            <li>{{ action }}</li>
            {% endfor %}
          </ul>
          <div class="d-flex flex-wrap gap-3 mt-4">
            <a class="btn btn-ghost" href="{% url 'scan_history' %}">Back to dashboard</a>
            <a class="btn btn-primary-neo" href="{% url 'home' %}#scanner">New scan</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}