{% extends "base.html" %}
{% block title %}Message detail · Email Security{% endblock %}
{% block content %}
{% include "_email_nav.html" %}

<style>
  .md-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
  .md-head h1 { margin:0 0 3px; font:700 19px/1.3 var(--font-sans); }
  .md-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(240px,1fr); gap:14px; }
  @media (max-width:820px){ .md-grid { grid-template-columns:1fr; } }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; }
  .card h2 { font:700 12px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin:0 0 12px; }
  dl.kv { margin:0; display:grid; grid-template-columns:130px 1fr; gap:8px 14px; font-size:13px; }
  dl.kv dt { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
  dl.kv dd { margin:0; word-break:break-word; font-family:var(--font-mono); font-size:12px; }
  ul.rs { margin:0; padding-left:18px; font-size:12.5px; color:var(--ink-2); line-height:1.75; }
  .sclbig { display:flex; align-items:center; gap:14px; }
  .sclbig .n { font:700 40px/1 var(--font-mono); }
  .sclbig .meta { font-size:12px; color:var(--muted); }
  .sclbig .track { height:8px; border-radius:4px; background:var(--surface-3); overflow:hidden; margin-top:8px; }
  .sclbig .track i { display:block; height:100%; border-radius:4px; }
  .b-trusted .n, .b-clean .n { color:var(--ok); } .b-trusted .track i, .b-clean .track i { background:var(--ok); }
  .b-susp .n { color:#fbbf24; } .b-susp .track i { background:#fbbf24; }
  .b-spam .n { color:#fb923c; } .b-spam .track i { background:#fb923c; }
  .b-high .n, .b-certain .n { color:#f97373; } .b-high .track i, .b-certain .track i { background:#f97373; }
  .b-na .n { color:var(--muted-2); }
  .acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
  .acts form { margin:0; }
  .banner.ok { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--ok); padding:9px 12px; border-radius:var(--r-md); font-size:12.5px; margin-bottom:12px; }
</style>

{% if saved %}<div class="banner ok">Action applied.</div>{% endif %}

<div class="md-head">
  <div>
    <h1>{{ t.subject or '(no subject)' }}</h1>
    <p class="muted" style="margin:0; font-size:12.5px;">Post-delivery mailbox quarantine &middot; detected {{ t.detected_at| pt('%b %d, %Y %H:%M') }}</p>
  </div>
  <a class="btn btn-ghost" href="/email/quarantine?tab=mailbox">&lsaquo; Quarantined messages</a>
</div>

<div class="md-grid">
  <div class="card">
    <h2>Message</h2>
    <dl class="kv">
      <dt>From</dt><dd>{{ t.sender or '—' }}{% if t.from_display %} <span class="muted">({{ t.from_display }})</span>{% endif %}</dd>
      <dt>Mailbox</dt><dd>{{ mailbox }}</dd>
      <dt>Organization</dt><dd>{{ org.name if org else '—' }}</dd>
      <dt>Received</dt><dd>{{ t.received_at| pt('%b %d, %Y %H:%M') if t.received_at else '—' }}</dd>
      <dt>Message id</dt><dd>{{ t.message_id }}</dd>
      <dt>Verdict</dt><dd>{{ t.threat_type }} &middot; {{ t.severity }} &middot; score {{ t.score }}</dd>
      <dt>State</dt><dd>{{ t.action }}</dd>
    </dl>

    <h2 style="margin-top:20px;">Why it was flagged</h2>
    {% if reasons %}
    <ul class="rs">{% for r in reasons %}<li>{{ r }}</li>{% endfor %}</ul>
    {% else %}
    <p class="muted" style="font-size:12.5px; margin:0;">No individual indicators were stored for this message.</p>
    {% endif %}

    <div class="acts">
      <form method="post" action="/email/quarantine/{{ t.id }}/release"><input type="hidden" name="back" value="/email/quarantine"><button class="btn btn-ghost" type="submit">Release</button></form>
      <form method="post" action="/email/quarantine/{{ t.id }}/allow"><input type="hidden" name="back" value="/email/quarantine"><button class="btn btn-ghost" type="submit" title="Release and allow-list this sender">Release and Allow</button></form>
      <form method="post" action="/email/quarantine/{{ t.id }}/block"><input type="hidden" name="back" value="/email/quarantine"><button class="btn btn-ghost" type="submit" title="Keep it out and block-list this sender">Block sender</button></form>
      <form method="post" action="/email/quarantine/{{ t.id }}/delete" onsubmit="return confirm('Delete this message? It moves to the mailbox Trash (recoverable ~30 days) and the record is removed here.');"><input type="hidden" name="back" value="/email/quarantine"><button class="btn btn-danger" type="submit">Delete</button></form>
    </div>
    <p class="muted" style="font-size:11px; margin:12px 0 0;">The raw message body is not copied into this
      platform for mailbox-scanned mail &mdash; it stays in the mail provider. Only headers, verdict and
      indicators are stored here.</p>
  </div>

  <div class="card">
    <h2>Spam confidence level</h2>
    <div class="sclbig b-{{ scl.band }}">
      <div>
        <div class="n">{{ scl.v if scl.v is not none else '—' }}</div>
      </div>
      <div style="flex:1;">
        <div style="font:600 13px var(--font-sans); text-transform:capitalize;">{{ scl.label }}</div>
        <div class="track"><i style="width:{{ 0 if scl.v is none or scl.v < 0 else (scl.v / 9 * 100)|round|int }}%;"></i></div>
        <div class="meta" style="margin-top:8px;">
          {% if scl.derived %}Derived from the stored analyzer score ({{ t.score }}) &mdash; this message was
          recorded before the SCL column existed.{% else %}Recorded at scan time from analyzer score {{ t.score }}.{% endif %}
        </div>
      </div>
    </div>
    <p class="muted" style="font-size:11.5px; margin:14px 0 0; line-height:1.7;">
      &minus;1 trusted / allow-listed &middot; 0&ndash;2 not spam &middot; 3&ndash;4 suspicious &middot;
      5&ndash;6 spam &middot; 7&ndash;8 high confidence spam &middot; 9 certain spam.
    </p>
  </div>
</div>
{% endblock %}