{% extends "base.html" %}
{% block title %}Message · Email Gateway{% endblock %}
{% block content %}

<style>
  .mm-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); margin-bottom:14px; }
  .card h2 { font-size:12px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .verdict { border-radius:var(--r-md); padding:14px 16px; margin-bottom:14px; }
  .verdict.crit { background:rgba(249,115,115,.12); border:1px solid rgba(249,115,115,.4); }
  .verdict.warn { background:rgba(251,191,36,.1); border:1px solid rgba(251,191,36,.4); }
  .verdict.clean { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.35); }
  .sev { display:inline-block; padding:2px 10px; border-radius:999px; font:700 12px/1.6 var(--font-sans); }
  .sev.crit { background:rgba(249,115,115,.2); color:#fca5a5; } .sev.warn { background:rgba(251,191,36,.2); color:#fbbf24; } .sev.clean { background:rgba(74,222,128,.2); color:var(--ok); }
  .reasons { margin:10px 0 0; padding-left:18px; } .reasons li { margin:4px 0; font-size:13px; }
  .hdrs { display:grid; grid-template-columns:120px 1fr; gap:4px 12px; font-size:12.5px; }
  .hdrs .k { color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-size:10px; font-weight:700; padding-top:2px; }
  .hdrs .v { font-family:var(--font-mono); word-break:break-all; }
  pre.body { background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:12px; max-height:340px; overflow:auto; font-size:12px; white-space:pre-wrap; word-break:break-word; margin:0; }
  .links li, .atts li { font-family:var(--font-mono); font-size:11.5px; word-break:break-all; margin:3px 0; }
  .act { display:inline-block; padding:2px 9px; border-radius:999px; font:700 10.5px/1.6 var(--font-sans); }
  .act.quarantined { background:rgba(249,115,115,.16); color:#fca5a5; } .act.delivered { background:rgba(74,222,128,.14); color:var(--ok); } .act.released { background:rgba(96,165,250,.15); color:#93c5fd; } .act.deferred { background:rgba(251,191,36,.16); color:#fbbf24; }
  .muted { color:var(--muted); } .crumb a { color:var(--muted); }
  .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>

<div class="mm-head">
  <div>
    <p class="crumb"><a href="/email">Email Security</a> &rsaquo; <a href="/email/gateway">Gateway</a> &rsaquo;</p>
    <h1 class="page-title" style="margin-bottom:2px;">Message #{{ g.id }}</h1>
    <p class="muted" style="margin:0;"><span class="act {{ g.action }}">{{ g.action }}</span> &middot; {{ g.ts| pt('%Y-%m-%d %H:%M') }}{% if org %} &middot; {{ org.name }}{% endif %}{% if g.relay %} &middot; {{ g.relay }}{% endif %}</p>
  </div>
  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <a class="btn btn-ghost" href="/email/gateway">&lsaquo; Gateway</a>
    {% if g.action != 'released' %}
    <form method="post" action="/email/gateway/{{ g.id }}/release" onsubmit="return confirm('Release this message and deliver it downstream?');"><button class="btn btn-primary" type="submit" title="Deliver downstream (false positive)">Release</button></form>
    {% endif %}
    <form method="post" action="/email/gateway/{{ g.id }}/delete" onsubmit="return confirm('Delete this message permanently?');"><button class="btn btn-ghost" type="submit">Delete</button></form>
  </div>
</div>

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

<div class="verdict {{ g.severity if g.severity else 'clean' }}">
  <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
    <span class="sev {{ g.severity if g.severity else 'clean' }}">{{ (g.severity or 'clean')|upper }}</span>
    {% if g.threat_type %}<strong style="font-size:15px;">{{ g.threat_type|capitalize }}</strong>{% endif %}
    {% if g.severity %}<span class="muted">risk score {{ g.score }}</span>{% endif %}
    {% if g.clam %}<span class="muted">&middot; ClamAV: {{ g.clam }}</span>{% endif %}
  </div>
  {% if reasons %}<ul class="reasons">{% for r in reasons %}<li>{{ r }}</li>{% endfor %}</ul>{% endif %}
</div>

{% if parsed and not parsed.error %}
<div class="card">
  <h2>Headers</h2>
  <div class="hdrs">
    <span class="k">From</span><span class="v">{{ parsed.from or '—' }}</span>
    <span class="k">To</span><span class="v">{{ parsed.to or g.rcpt_to or '—' }}</span>
    <span class="k">Subject</span><span class="v">{{ parsed.subject or '—' }}</span>
    <span class="k">Date</span><span class="v">{{ parsed.date or '—' }}</span>
    {% if parsed.reply_to %}<span class="k">Reply-To</span><span class="v">{{ parsed.reply_to }}</span>{% endif %}
    <span class="k">Auth</span><span class="v">{{ parsed.auth or '—' }}</span>
    <span class="k">Size</span><span class="v">{{ parsed.size }} bytes</span>
  </div>
</div>

<div class="card">
  <h2>Body (sanitised text)</h2>
  <pre class="body">{{ parsed.body or '(no text body)' }}</pre>
</div>

<div class="card" style="display:grid; grid-template-columns:1fr 1fr; gap:18px;">
  <div>
    <h2>Links ({{ parsed.urls|length }})</h2>
    {% if parsed.urls %}<ul class="links">{% for u in parsed.urls %}<li>{{ u }}</li>{% endfor %}</ul>{% else %}<p class="muted">None.</p>{% endif %}
  </div>
  <div>
    <h2>Attachments ({{ parsed.attachments|length }})</h2>
    {% if parsed.attachments %}<ul class="atts">{% for a in parsed.attachments %}<li>{{ a.name }} <span class="muted">({{ a.size }}b{% if a.sha256 %}, {{ a.sha256[:16] }}…{% endif %})</span></li>{% endfor %}</ul>{% else %}<p class="muted">None.</p>{% endif %}
  </div>
</div>
{% else %}
<div class="card"><p class="muted">{{ parsed.error if parsed else 'Stored message not available (delivered mail may not be retained, or was deleted).' }}</p></div>
{% endif %}

{% endblock %}