{% extends "base.html" %}
{% block title %}{{ gd.domain }} · Gateway Setup{% endblock %}
{% block content %}

<style>
  .dd-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:18px; box-shadow:var(--shadow-1); margin-bottom:14px; }
  .card h2 { font-size:13px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .steps { counter-reset:step; }
  .rec { border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; background:var(--surface-2); position:relative; }
  .rec .badge { display:inline-block; padding:2px 9px; border-radius:6px; background:var(--surface-3); border:1px solid var(--line); font:700 11px/1.5 var(--font-mono); margin-bottom:8px; }
  .kv { display:grid; grid-template-columns:90px 1fr; gap:4px 12px; font-size:12.5px; align-items:start; }
  .kv .k { color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-size:10px; font-weight:700; padding-top:3px; }
  .kv .v { font-family:var(--font-mono); word-break:break-all; background:var(--surface-3); padding:5px 8px; border-radius:6px; }
  .rec .note { color:var(--muted); font-size:11.5px; margin:8px 0 0; }
  .verify { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
  @media (max-width:600px){ .verify { grid-template-columns:1fr; } }
  .vbox { border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; background:var(--surface-2); }
  .vbox .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; }
  .vbox .res { font:700 15px/1.3 var(--font-sans); margin-top:6px; } .vbox .res.ok { color:var(--ok); } .vbox .res.no { color:#fca5a5; }
  .st { display:inline-block; padding:2px 10px; border-radius:999px; font:700 11px/1.6 var(--font-sans); }
  .st.verified { background:rgba(74,222,128,.14); color:var(--ok); } .st.pending { background:rgba(251,191,36,.16); color:#fbbf24; }
  .muted { color:var(--muted); } .crumb a { color:var(--muted); }
</style>

<div class="dd-head">
  <div>
    <p class="crumb"><a href="/email">Email Security</a> &rsaquo; <a href="/email/domains">Domains</a> &rsaquo;</p>
    <h1 class="page-title" style="margin-bottom:2px;">{{ gd.domain }}</h1>
    <p class="muted" style="margin:0;">
      <span class="st {{ gd.status }}">{{ gd.status }}</span>
      {% if org %}&middot; {{ org.name }}{% endif %}
      {% if gd.downstream_host %}&middot; relay → <span class="mono">{{ gd.downstream_host }}:{{ gd.downstream_port }}</span>{% endif %}
      {% if gd.last_checked_at %}&middot; checked {{ gd.last_checked_at| pt('%Y-%m-%d %H:%M') }}{% endif %}
    </p>
  </div>
  <div style="display:flex; gap:10px; flex-wrap:wrap;">
    <a class="btn btn-ghost" href="/email/domains">&lsaquo; Domains</a>
    <form method="post" action="/email/domains/{{ gd.id }}/delete" onsubmit="return confirm('Remove {{ gd.domain }} from the gateway?');"><button class="btn btn-ghost" type="submit">Remove</button></form>
  </div>
</div>

{% if checked %}
<div class="card" style="border-color:{{ 'rgba(74,222,128,.4)' if (gd.mx_ok and gd.txt_ok) else 'rgba(251,191,36,.4)' }};">
  {% if gd.mx_ok and gd.txt_ok %}<strong style="color:var(--ok);">✓ Verified.</strong> MX is pointing at the gateway and ownership is confirmed. This domain's mail will be filtered inline.
  {% else %}<strong style="color:#fbbf24;">Not fully verified yet.</strong> DNS can take time to propagate — re-check in a few minutes. (Needs at least MX + TXT.){% endif %}
</div>
{% endif %}

<div class="card">
  <h2>Live DNS verification</h2>
  <div class="verify">
    <div class="vbox"><div class="lbl">MX → gateway</div><div class="res {{ 'ok' if gd.mx_ok else 'no' }}">{{ '✓ pointing at us' if gd.mx_ok else '✗ not yet' }}</div></div>
    <div class="vbox"><div class="lbl">Ownership (TXT)</div><div class="res {{ 'ok' if gd.txt_ok else 'no' }}">{{ '✓ confirmed' if gd.txt_ok else '✗ not found' }}</div></div>
    <div class="vbox"><div class="lbl">SPF include</div><div class="res {{ 'ok' if gd.spf_ok else 'no' }}">{{ '✓ present' if gd.spf_ok else '✗ missing' }}</div></div>
  </div>
  <form method="post" action="/email/domains/{{ gd.id }}/verify"><button class="btn btn-primary" type="submit">Re-check DNS now</button></form>
</div>

<div class="card">
  <h2>DNS records to publish</h2>
  <p class="muted" style="font-size:12.5px; margin:0 0 14px;">Add these at {{ gd.domain }}'s DNS host. Switch the <strong>MX last</strong> — once it points here, all inbound mail flows through the gateway.</p>
  <div class="steps">
    {% for r in records %}
    <div class="rec">
      <span class="badge">{{ r.type }}</span>
      <div class="kv">
        <span class="k">Host</span><span class="v">{{ r.host }}</span>
        {% if r.priority is not none %}<span class="k">Priority</span><span class="v">{{ r.priority }}</span>{% endif %}
        <span class="k">Value</span><span class="v">{{ r.value }}</span>
      </div>
      <p class="note">{{ r.note }}</p>
    </div>
    {% endfor %}
  </div>
</div>

<div class="card">
  <h2>How it flows</h2>
  <p class="muted" style="font-size:12.5px; margin:0;">
    Internet sender → <strong>{{ mx_host }}</strong> (us) → filter inline (16k IOCs + ClamAV + your allow/block policies)
    → clean mail relays to <strong>{{ gd.downstream_host or 'your mailserver' }}</strong>; threats are held in
    <a href="/email/quarantine">quarantine</a>. {% if gd.org_id %}This domain's mail is scoped to <strong>{{ org.name if org else 'its org' }}</strong> ({{ msg_count }} processed).{% endif %}
  </p>
</div>

{% endblock %}