{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
  DKIM manager.  The comparison panel is the point of this page: a local key
  that no longer matches what DNS publishes signs every outgoing message with a
  signature the world cannot verify, and nothing else in the stack complains.
{% endcomment %}

{% block title %}DKIM manager{% endblock %}

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

  <div class="mb-4">
    <h1 class="h4 mb-1">DKIM manager</h1>
    <p class="text-muted mb-0 small">
      A 2048-bit signing key per domain, selector
      <span class="font-monospace">{{ selector }}</span>. The public half must be
      published as a TXT record before receiving servers can verify anything.
    </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-6">
          <label class="form-label" for="cpDomain">Domain</label>
          <select class="form-select" id="cpDomain" ng-model="domain" ng-change="load()">
            {% for entry in domains %}
              <option value="{{ entry }}">{{ entry }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-6 d-flex gap-2">
          <button class="btn btn-primary" type="button" ng-click="generate()"
                  ng-disabled="busy" ng-show="dkim.state === 'missing'">
            <i class="fas fa-key me-1"></i>
            <span ng-bind="busy ? 'Generating…' : 'Generate key'"></span>
          </button>
          <button class="btn btn-outline-warning" type="button" ng-click="rotate()"
                  ng-disabled="busy" ng-hide="dkim.state === 'missing'">
            <i class="fas fa-rotate me-1"></i>Rotate key
          </button>
          <button class="btn btn-outline-secondary" type="button" ng-click="load()"
                  ng-disabled="busy">
            <i class="fas fa-arrows-rotate me-1"></i>Re-check DNS
          </button>
          <button class="btn btn-outline-danger" type="button" ng-click="remove()"
                  ng-disabled="busy" ng-hide="dkim.state === 'missing'">
            <i class="fas fa-trash me-1"></i>Delete key
          </button>
        </div>
      </div>
    </div>
  </div>

  <div ng-show="loaded" ng-cloak>

    <!-- ---------- status banner ---------- -->
    <div class="alert d-flex align-items-start gap-2"
         ng-class="{
           'alert-success': dkim.state === 'match',
           'alert-danger':  dkim.state === 'mismatch',
           'alert-warning': dkim.state === 'notPublished' || dkim.state === 'missing',
           'alert-info':    dkim.state === 'externalDNS'
         }">
      <i class="fas fs-5"
         ng-class="{
           'fa-circle-check':        dkim.state === 'match',
           'fa-triangle-exclamation': dkim.state === 'mismatch',
           'fa-circle-exclamation':  dkim.state === 'notPublished' || dkim.state === 'missing',
           'fa-circle-info':         dkim.state === 'externalDNS'
         }"></i>
      <div>
        <strong ng-bind="statusTitle()"></strong>
        <div class="small" ng-bind="statusDetail()"></div>
      </div>
    </div>

    <!-- ---------- the record to publish ---------- -->
    <div class="card mb-4" ng-hide="dkim.state === 'missing'">
      <div class="card-body">
        <h2 class="h6 mb-3">TXT record</h2>

        <div class="mb-3">
          <label class="form-label small text-muted mb-1" for="cpDkimRecordName">Name / host</label>
          <div class="input-group">
            <input type="text" id="cpDkimRecordName" class="form-control font-monospace" readonly
                   ng-model="dkim.recordName">
            <button class="btn btn-outline-secondary" type="button" title="Copy"
                    ng-attr-data-cp-copy="{$ dkim.recordName $}">
              <i class="fas fa-copy"></i>
            </button>
          </div>
        </div>

        <div class="mb-3">
          <label class="form-label small text-muted mb-1" for="cpDkimRecordValue">Value</label>
          <div class="input-group">
            <textarea id="cpDkimRecordValue" class="form-control font-monospace" rows="4" readonly
                      ng-model="dkim.localValue"></textarea>
            <button class="btn btn-outline-secondary" type="button" title="Copy"
                    ng-attr-data-cp-copy="{$ dkim.localValue $}">
              <i class="fas fa-copy"></i>
            </button>
          </div>
          <div class="form-text">
            Paste this verbatim. Some DNS panels split long values automatically;
            do not add quotes or line breaks yourself.
          </div>
        </div>

        <div class="d-flex flex-wrap gap-2 align-items-center">
          <button class="btn btn-primary" type="button" ng-click="publish()"
                  ng-disabled="busy" ng-show="dkim.zoneHosted">
            <i class="fas fa-cloud-arrow-up me-1"></i>
            <span ng-bind="dkim.published ? 'Republish to DNS' : 'Publish to DNS'"></span>
          </button>
          <span class="text-muted small" ng-hide="dkim.zoneHosted">
            <i class="fas fa-circle-info me-1"></i>
            This zone is not hosted on this server, so the record has to be added
            at your DNS provider by hand.
          </span>
          <span class="text-muted small ms-auto" ng-show="dkim.rotated">
            Key recorded <span ng-bind="dkim.rotated"></span>
          </span>
        </div>
      </div>
    </div>

    <!-- ---------- live comparison ---------- -->
    <div class="card" ng-show="dkim.zoneHosted && dkim.published">
      <div class="card-body">
        <h2 class="h6 mb-3">Local key vs published record</h2>
        <div class="row g-3">
          <div class="col-lg-6">
            <label class="form-label small text-muted mb-1">On this server</label>
            <pre class="p-2 rounded small mb-0"
                 style="background: var(--cp-bg-subtle); border: 1px solid var(--cp-border); white-space: pre-wrap; word-break: break-all;"
                 ng-bind="dkim.localValue"></pre>
          </div>
          <div class="col-lg-6">
            <label class="form-label small text-muted mb-1">Published in DNS</label>
            <pre class="p-2 rounded small mb-0"
                 style="background: var(--cp-bg-subtle); border: 1px solid var(--cp-border); white-space: pre-wrap; word-break: break-all;"
                 ng-bind="dkim.publishedValue"></pre>
          </div>
        </div>
        <p class="small mb-0 mt-3"
           ng-class="dkim.state === 'match' ? 'text-success' : 'text-danger'"
           ng-bind="dkim.state === 'match'
                    ? 'The published public key matches the key this server signs with.'
                    : 'The published public key does NOT match the key this server signs with — every signature currently fails verification.'"></p>
      </div>
    </div>

  </div>

  {% endif %}

  {% if isAdmin %}
  <div class="card mt-4">
    <div class="card-body">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <h2 class="h6 mb-0">Reconcile with the mail server</h2>
        <button class="btn btn-sm btn-outline-secondary" type="button" ng-click="reconcile()"
                ng-disabled="reconciling">
          <i class="fas fa-arrows-rotate me-1"></i>
          <span ng-bind="reconciling ? 'Checking…' : 'Check installed keys'"></span>
        </button>
      </div>
      <p class="text-muted small mb-3">
        Every domain above only shows <em>this panel's own record</em> of its
        DKIM key. This compares that record against the keys actually
        installed on the mail server, across every domain -- the
        authoritative view, independent of what any single domain's page
        claims.
      </p>

      <div ng-show="reconciliation" ng-cloak>
        <div class="alert alert-success mb-3" ng-show="reconciliation.inSync">
          <i class="fas fa-circle-check me-1"></i>
          The panel's records agree with the mail server for every domain.
        </div>

        <div ng-hide="reconciliation.inSync">
          <div class="mb-3" ng-show="reconciliation.onlyInPanel.length">
            <div class="text-danger small fw-semibold mb-1">
              <i class="fas fa-triangle-exclamation me-1"></i>
              The panel has a key on record for these domains, but the mail
              server does not -- it is not actually signing outbound mail:
            </div>
            <ul class="small mb-0">
              <li ng-repeat="d in reconciliation.onlyInPanel" ng-bind="d"></li>
            </ul>
          </div>

          <div class="mb-3" ng-show="reconciliation.onlyOnDaemon.length">
            <div class="text-warning small fw-semibold mb-1">
              <i class="fas fa-circle-info me-1"></i>
              The mail server has a key installed for these domains that the
              panel has no record of:
            </div>
            <ul class="small mb-0">
              <li ng-repeat="d in reconciliation.onlyOnDaemon" ng-bind="d"></li>
            </ul>
          </div>

          <div class="mb-0" ng-show="reconciliation.selectorMismatch.length">
            <div class="text-danger small fw-semibold mb-1">
              <i class="fas fa-triangle-exclamation me-1"></i>
              The panel and the mail server disagree on the selector for
              these domains:
            </div>
            <ul class="small mb-0">
              <li ng-repeat="d in reconciliation.selectorMismatch" ng-bind="d"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

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