{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
  A campaign with no sending host sends through the local Postfix (so
  opendkim signs it); rows below are only the user's OWN custom SMTP hosts.
{% endcomment %}

{% block title %}Sending hosts{% endblock %}

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

  <ul class="cp-breadcrumb">
    <li>Email Marketing</li>
    <li>Sending hosts</li>
  </ul>

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-server"></i> Sending hosts</h1>
      <p class="cp-page-head__sub">
        Campaigns send through the local mail server by default. Add a custom SMTP host
        (an ESP, a relay, another mail provider) if you would rather use one of your own.
      </p>
    </div>
  </div>

  <div class="cp-alert cp-alert--danger" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p ng-bind="errorMessage"></p>
  </div>

  <!-- ---------------------------------------------------------- local test -->
  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-house-signal"></i> Local Postfix</h2>
    </div>
    <div class="cp-card__body">
      <p class="cp-help">The default. No credentials are needed; mail leaves through 127.0.0.1:25.</p>
      <button type="button" class="cp-btn cp-btn--ghost" ng-click="testLocal()" ng-disabled="busy">
        <span class="cp-spinner" ng-if="busy"></span>
        <i class="fa-solid fa-plug" ng-if="!busy"></i> Test local connection
      </button>
      <div class="cp-alert" ng-if="localTest.message" ng-cloak
           ng-class="localTest.ok ? 'cp-alert--success' : 'cp-alert--danger'" style="margin-top:10px;">
        <p ng-bind="localTest.message"></p>
      </div>
    </div>
  </div>

  <!-- --------------------------------------------------------------- hosts -->
  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-list"></i> Your custom hosts</h2>
    </div>
    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-table-wrap" ng-if="hosts.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Host</th>
              <th scope="col">Encryption</th>
              <th scope="col">Username</th>
              <th scope="col">Password</th>
              <th scope="col">Default</th>
              <th scope="col">Last test</th>
              <th scope="col" class="cp-nowrap">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="host in hosts">
              <td ng-bind="host.name"></td>
              <td class="cp-mono">{$ host.host $}:{$ host.port $}</td>
              <td ng-bind="host.encryption"></td>
              <td ng-bind="host.username || '—'"></td>
              <td>
                <span class="cp-badge" ng-class="host.hasPassword ? 'cp-badge--primary' : ''">
                  {$ host.hasPassword ? 'set' : 'none' $}
                </span>
              </td>
              <td><i class="fa-solid fa-star" ng-if="host.isDefault"></i></td>
              <td>
                <span ng-if="host.lastTestOk === true" class="cp-badge cp-badge--success">ok</span>
                <span ng-if="host.lastTestOk === false" class="cp-badge cp-badge--danger">failed</span>
                <span ng-if="host.lastTestOk === null" class="cp-muted">untested</span>
              </td>
              <td class="cp-nowrap">
                <div class="cp-btn-group">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="edit(host)">
                    <i class="fa-solid fa-pen"></i>
                  </button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="test(host)" ng-disabled="busy">
                    <i class="fa-solid fa-plug"></i>
                  </button>
                  <button type="button" class="cp-btn cp-btn--danger cp-btn--sm" ng-click="remove(host)" ng-disabled="busy">
                    <i class="fa-solid fa-trash"></i>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cp-empty" ng-if="!hosts.length && !busy">
        <i class="fa-solid fa-server"></i>
        <h4>No custom sending hosts yet</h4>
        <p>Campaigns will send through the local Postfix until you add one.</p>
      </div>
    </div>
  </div>

  <!-- --------------------------------------------------------- form -->
  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title">
        <i class="fa-solid fa-plus" ng-if="!form.id"></i>
        <i class="fa-solid fa-pen" ng-if="form.id"></i>
        {$ form.id ? 'Edit sending host' : 'Add a sending host' $}
      </h2>
    </div>
    <div class="cp-card__body">
      <form novalidate ng-submit="save()">
        <div class="cp-form-grid">
          <div class="cp-field">
            <label class="cp-label" for="emkHostName">Label <span class="cp-req">*</span></label>
            <input id="emkHostName" type="text" class="cp-input" ng-model="form.name" maxlength="100" required>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkHostHost">Host <span class="cp-req">*</span></label>
            <input id="emkHostHost" type="text" class="cp-input" ng-model="form.host" maxlength="255" required>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkHostPort">Port</label>
            <input id="emkHostPort" type="number" class="cp-input" ng-model="form.port" min="1" max="65535">
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkHostEnc">Encryption</label>
            <select id="emkHostEnc" class="cp-select" ng-model="form.encryption">
              <option value="starttls">STARTTLS</option>
              <option value="ssl">SSL/TLS</option>
              <option value="none">None</option>
            </select>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkHostUser">Username</label>
            <input id="emkHostUser" type="text" class="cp-input" ng-model="form.username" maxlength="255" autocomplete="off">
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkHostPass">Password</label>
            <input id="emkHostPass" type="password" class="cp-input" ng-model="form.password" autocomplete="new-password"
                   ng-attr-placeholder="{$ form.id ? 'Leave blank to keep the current password' : '' $}">
          </div>
          <div class="cp-field">
            <label class="cp-label">
              <input type="checkbox" ng-model="form.isDefault"> Preselect for new campaigns
            </label>
          </div>
        </div>
        <div class="cp-btn-group">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
            <span class="cp-spinner" ng-if="busy"></span> {$ form.id ? 'Save changes' : 'Add host' $}
          </button>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="testForm()" ng-disabled="busy">
            <i class="fa-solid fa-plug"></i> Test these settings
          </button>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="resetForm()" ng-disabled="busy" ng-if="form.id">
            Cancel
          </button>
        </div>
      </form>
      <div class="cp-alert" ng-if="formTest.message" ng-cloak
           ng-class="formTest.ok ? 'cp-alert--success' : 'cp-alert--danger'" style="margin-top:10px;">
        <p ng-bind="formTest.message"></p>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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