{% extends "base.html" %}
{% block title %}Gateway Domains · SD RMM{% endblock %}
{% block content %}
{% include "_email_nav.html" %}

<style>
  .gd-head { display:flex; justify-content:space-between; align-items:baseline; 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:13px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .addform { display:grid; grid-template-columns:2fr 2fr 1fr 1.5fr auto; gap:8px; align-items:end; }
  @media (max-width:820px){ .addform { grid-template-columns:1fr 1fr; } }
  .addform label { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:700; display:block; margin-bottom:4px; }
  .addform input, .addform select { width:100%; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:8px 10px; font:inherit; }
  table.gd { width:100%; border-collapse:collapse; font-size:13px; }
  table.gd th { text-align:left; color:var(--muted); font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; padding:7px 8px; border-bottom:1px solid var(--line); }
  table.gd td { padding:8px; border-bottom:1px solid var(--line-soft); }
  .st { display:inline-block; padding:2px 9px; border-radius:999px; font:700 10.5px/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; }
  .chk { font:700 10px/1.5 var(--font-mono); } .chk.ok { color:var(--ok); } .chk.no { color:var(--muted-2); }
  .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; }
  .muted { color:var(--muted); }
</style>

<div class="gd-head">
  <div>
    <h1 class="page-title" style="margin-bottom:2px;">Gateway Domains</h1>
    <p class="muted" style="margin:0;">Onboard a customer domain onto the inline email gateway. Add it, publish the DNS records we generate, and we filter its mail at the door.</p>
  </div>
  <a class="btn btn-ghost" href="/email">&lsaquo; Email Security</a>
</div>

{% if saved == 'dup' %}<div class="banner ok" style="background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.35); color:#fbbf24;">That domain is already onboarded.</div>
{% elif saved %}<div class="banner ok">Saved.</div>{% endif %}

<div class="card">
  <h2>Onboard a domain</h2>
  <form class="addform" method="post" action="/email/domains/add">
    <div><label>Domain</label><input type="text" name="domain" placeholder="acme-corp.com" required></div>
    <div><label>Downstream mailserver</label><input type="text" name="downstream_host" placeholder="mail.acme-corp.com (their real MX)"></div>
    <div><label>Port</label><input type="text" name="downstream_port" value="25"></div>
    <div><label>Organization</label>
      <select name="org_id"><option value="">— none —</option>{% for o in orgs %}<option value="{{ o.id }}">{{ o.name }}</option>{% endfor %}</select></div>
    <div><button class="btn btn-primary" type="submit">Add &amp; get records</button></div>
  </form>
  <p class="muted" style="font-size:12px; margin:10px 0 0;">The <strong>downstream mailserver</strong> is where we relay clean mail after filtering (their current MX target, before they switch it to us).</p>
</div>

<div class="card">
  <h2>Onboarded domains ({{ domains|length }})</h2>
  {% if domains %}
  <table class="gd">
    <thead><tr><th>Domain</th><th>Org</th><th>Downstream</th><th>DNS checks</th><th>Status</th><th></th></tr></thead>
    <tbody>
      {% for d in domains %}
      <tr>
        <td><a href="/email/domains/{{ d.id }}"><strong>{{ d.domain }}</strong></a></td>
        <td class="muted">{{ org_name.get(d.org_id, '—') if d.org_id else '—' }}</td>
        <td class="muted mono">{{ d.downstream_host or '—' }}{% if d.downstream_host %}:{{ d.downstream_port }}{% endif %}</td>
        <td>
          <span class="chk {{ 'ok' if d.mx_ok else 'no' }}">MX{{ '✓' if d.mx_ok else '·' }}</span>
          <span class="chk {{ 'ok' if d.txt_ok else 'no' }}">TXT{{ '✓' if d.txt_ok else '·' }}</span>
          <span class="chk {{ 'ok' if d.spf_ok else 'no' }}">SPF{{ '✓' if d.spf_ok else '·' }}</span>
        </td>
        <td><span class="st {{ d.status }}">{{ d.status }}</span></td>
        <td><a class="btn btn-ghost" href="/email/domains/{{ d.id }}">Setup &rsaquo;</a></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}<p class="muted">No domains onboarded yet. Add one above to generate its DNS setup.</p>{% endif %}
</div>

{% endblock %}