{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Email debugger.

The point of this page is to turn "my email doesn't work" into a support
ticket someone can close. Every check reports the evidence it based its verdict
on, so the result can be pasted into a ticket and acted on by a person who was
not sitting at the panel.

"unknown" is deliberately a separate state from "failed": a DNS timeout is not
a misconfiguration, and reporting it as one sends the operator chasing a
problem that may not exist.
{% endcomment %}

{% block title %}Email debugger{% endblock %}

{% block content %}
<div ng-controller="emailDebuggerController">

  <div class="mb-4">
    <h1 class="h4 mb-1">Email debugger</h1>
    <p class="text-muted mb-0 small">
      Everything that has to be true for mail to reach this server and leave it
      again, checked against live DNS and this machine — with the evidence for
      each verdict.
    </p>
  </div>

  {% if not domains %}
    <div class="alert alert-info">
      <i class="fas fa-circle-info me-1"></i>
      There are no domains available to you yet.
    </div>
  {% else %}

  <div class="card mb-4">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-5">
          <label class="form-label" for="cpDomain">Domain</label>
          <select class="form-select" id="cpDomain" ng-model="domain" ng-change="reset()">
            {% for entry in domains %}
              <option value="{{ entry }}">{{ entry }}</option>
            {% endfor %}
          </select>
        </div>

        <div class="col-md-4 d-grid">
          <button class="btn btn-primary" type="button" ng-click="run()"
                  ng-disabled="running || !domain">
            <i class="fas fa-stethoscope me-1"></i>
            <span ng-bind="running ? 'Checking…' : 'Run diagnostics'"></span>
          </button>
        </div>

        <div class="col-md-3 text-md-end">
          <div class="small text-muted">
            <div>Server <span class="font-monospace">{{ serverIP }}</span></div>
            <div>HELO <span class="font-monospace">{{ panelHostname }}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div ng-show="report" ng-cloak>
    <div class="d-flex flex-wrap gap-2 mb-3">
      <span class="badge rounded-pill text-bg-success">
        {$ report.summary.pass $} passed
      </span>
      <span class="badge rounded-pill text-bg-danger" ng-show="report.summary.fail">
        {$ report.summary.fail $} failed
      </span>
      <span class="badge rounded-pill text-bg-warning" ng-show="report.summary.warn">
        {$ report.summary.warn $} need attention
      </span>
      <span class="badge rounded-pill text-bg-secondary" ng-show="report.summary.unknown">
        {$ report.summary.unknown $} could not be determined
      </span>
      <span class="ms-auto small text-muted" ng-show="checkedAt">
        Checked {$ checkedAt $}
      </span>
    </div>

    <div class="card mb-3" ng-repeat="check in report.checks">
      <div class="card-body">
        <div class="d-flex align-items-start gap-3">
          <i class="fas fa-fw mt-1" ng-class="icon(check.state)"
             ng-style="{ color: colour(check.state) }" aria-hidden="true"></i>

          <div class="flex-grow-1">
            <div class="d-flex justify-content-between align-items-start gap-2">
              <h2 class="h6 mb-1">{$ check.label $}</h2>
              <span class="badge" ng-class="badge(check.state)"
                    ng-bind="label(check.state)"></span>
            </div>

            <p class="mb-2 small" ng-bind="check.summary"></p>

            <div class="alert alert-secondary py-2 px-3 small mb-2"
                 ng-show="check.advice">
              <i class="fas fa-lightbulb me-1"></i><span ng-bind="check.advice"></span>
            </div>

            <div ng-show="check.evidence.length">
              <button class="btn btn-link btn-sm p-0" type="button"
                      ng-click="toggle(check.key)">
                <span ng-bind="open[check.key] ? 'Hide evidence' : 'Show evidence'"></span>
                ({$ check.evidence.length $})
              </button>
              <pre class="cp-evidence mt-2 mb-0" ng-show="open[check.key]"><span
                ng-repeat="line in check.evidence">{$ line $}
</span></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-body">
      <h2 class="h6 mb-1">Send a test message</h2>
      <p class="text-muted small">
        Hands one message to Postfix on this server the same way a script on the
        box would, and shows the entire SMTP conversation plus what happened to
        the message afterwards. The sender must be a real mailbox on the domain.
      </p>

      <form novalidate ng-submit="sendTest()">
        <div class="row g-3 align-items-end">
          <div class="col-md-4">
            <label class="form-label" for="cpSender">From</label>
            <input type="email" class="form-control" id="cpSender" ng-model="sender"
                   autocomplete="off" spellcheck="false" list="cpSenders"
                   placeholder="postmaster@{$ domain $}" required>
            <datalist id="cpSenders">
              <option ng-repeat="address in mailboxes" value="{$ address $}"></option>
            </datalist>
          </div>

          <div class="col-md-5">
            <label class="form-label" for="cpRecipient">To</label>
            <input type="email" class="form-control" id="cpRecipient"
                   ng-model="recipient" autocomplete="off" spellcheck="false"
                   placeholder="you@gmail.com" required>
            <div class="form-text">
              Use an address at a large provider — their
              Authentication-Results header tells you what they made of your
              SPF, DKIM and DMARC.
            </div>
          </div>

          <div class="col-md-3 d-grid">
            <button type="submit" class="btn btn-outline-primary"
                    ng-disabled="sending || !domain">
              <i class="fas fa-paper-plane me-1"></i>
              <span ng-bind="sending ? 'Sending…' : 'Send test'"></span>
            </button>
          </div>
        </div>
      </form>

      <div class="mt-3" ng-show="test" ng-cloak>
        <div class="alert py-2 px-3 small"
             ng-class="test.ok ? 'alert-success' : 'alert-danger'">
          <span ng-show="test.ok">
            <i class="fas fa-circle-check me-1"></i>
            Postfix accepted the message<span ng-show="test.queueId"> and queued it as
            <span class="font-monospace">{$ test.queueId $}</span></span>.
            <span ng-show="test.queued">
              It is still in the queue
              (<span ng-bind="test.queued.status"></span><span
                ng-show="test.queued.reason">: {$ test.queued.reason $}</span>),
              which means delivery has not completed yet.
            </span>
            <span ng-hide="test.queued">
              It is no longer in the queue, so this server has handed it on.
            </span>
          </span>
          <span ng-hide="test.ok">
            <i class="fas fa-circle-xmark me-1"></i><span ng-bind="test.error"></span>
          </span>
        </div>

        <div ng-show="test.transcript.length">
          <button class="btn btn-link btn-sm p-0" type="button"
                  ng-click="showTranscript = !showTranscript">
            <span ng-bind="showTranscript ? 'Hide SMTP conversation' : 'Show SMTP conversation'"></span>
          </button>
          <pre class="cp-evidence mt-2 mb-0" ng-show="showTranscript"><span
            ng-repeat="line in test.transcript">{$ line $}
</span></pre>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
        <div>
          <h2 class="h6 mb-1">Mail log</h2>
          <p class="text-muted small mb-0">
            The last lines of the server's mail log that mention
            <span class="font-monospace">@{$ domain $}</span>. Other tenants'
            traffic is filtered out.
          </p>
        </div>
        <button class="btn btn-outline-secondary btn-sm" type="button"
                ng-click="loadLog()" ng-disabled="loadingLog || !domain">
          <i class="fas fa-rotate me-1"></i>
          <span ng-bind="loadingLog ? 'Reading…' : 'Refresh'"></span>
        </button>
      </div>

      <div class="alert alert-warning py-2 px-3 small mb-0" ng-show="logError" ng-cloak>
        <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="logError"></span>
      </div>

      <div class="alert alert-secondary py-2 px-3 small mb-0"
           ng-show="logLoaded && !logError && !logLines.length" ng-cloak>
        Nothing in the last {{ defaultLogLines }} matching lines. Either no mail has
        moved for this domain recently, or the log has already rotated.
      </div>

      <pre class="cp-evidence mt-2 mb-0" ng-show="logLines.length" ng-cloak><span
        ng-repeat="line in logLines">{$ line $}
</span></pre>
    </div>
  </div>

  {% endif %}
</div>
{% endblock %}

{% block styles %}
<style>
  /* Evidence and log blocks: monospace, scrollable, theme-aware.
     Every colour is a panel token so dark mode needs no second rule. */
  .cp-evidence {
    font-family: var(--cp-font-mono);
    font-size: .8125rem;
    line-height: 1.5;
    max-height: 22rem;
    overflow: auto;
    padding: .75rem 1rem;
    background: var(--cp-bg-subtle);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    white-space: pre-wrap;
    word-break: break-word;
  }
</style>
{% endblock %}

{% block scripts %}
<script src="{% static 'mailServer/mailServer.js' %}"></script>
{% endblock %}