{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Outbound SMTP smarthost relay. Administrator only, server-wide. The password
field is write-only by design: cp-smtp-relay get never returns it, and
leaving it blank on save keeps whatever credential is already configured.
{% endcomment %}

{% block title %}SMTP relay{% endblock %}

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

  <div class="mb-4">
    <h1 class="h4 mb-1">SMTP relay</h1>
    <p class="text-muted mb-0 small">
      Route all outbound mail through a smarthost instead of delivering directly.
    </p>
  </div>

  <div class="alert mb-4 py-2 px-3"
       ng-class="relay.enabled ? 'alert-warning' : 'alert-secondary'" ng-cloak>
    <span ng-show="relay.enabled">
      <i class="fas fa-paper-plane me-1"></i>
      Outbound mail is relayed through <span class="font-monospace" ng-bind="relay.host + ':' + relay.port"></span>.
    </span>
    <span ng-hide="relay.enabled">
      <i class="fas fa-server me-1"></i>
      Outbound mail is delivered directly. No relay is configured.
    </span>
  </div>

  <div class="card">
    <div class="card-body">
      <form novalidate ng-submit="save()">
        <div class="row g-3">
          <div class="col-md-8">
            <label class="form-label" for="cpHost">Relay host</label>
            <input type="text" class="form-control" id="cpHost" ng-model="form.host"
                   autocomplete="off" spellcheck="false" placeholder="smtp.example.com" required>
          </div>
          <div class="col-md-4">
            <label class="form-label" for="cpPort">Port</label>
            <input type="number" class="form-control" id="cpPort" ng-model="form.port"
                   min="1" max="65535" required>
          </div>
          <div class="col-md-6">
            <label class="form-label" for="cpUsername">Username (optional)</label>
            <input type="text" class="form-control" id="cpUsername" ng-model="form.username"
                   autocomplete="off" spellcheck="false">
          </div>
          <div class="col-md-6">
            <label class="form-label" for="cpPassword">
              Password
              <span class="text-muted small" ng-show="relay.hasPassword">
                (a password is already set -- leave blank to keep it)
              </span>
            </label>
            <input type="password" class="form-control" id="cpPassword" ng-model="form.password"
                   autocomplete="new-password">
          </div>
          <div class="col-md-6">
            <label class="form-label" for="cpTls">TLS</label>
            <select class="form-select" id="cpTls" ng-model="form.tls">
              <option value="none">None</option>
              <option value="may">Opportunistic</option>
              <option value="encrypt">Required</option>
            </select>
          </div>
        </div>

        <div class="mt-4 d-flex gap-2">
          <button type="submit" class="btn btn-primary" ng-disabled="busy">
            <i class="fas fa-floppy-disk me-1"></i>
            <span ng-bind="busy ? 'Saving…' : 'Save relay'"></span>
          </button>
          <button type="button" class="btn btn-outline-danger" ng-disabled="busy || !relay.enabled"
                  ng-click="disable()">
            <i class="fas fa-ban me-1"></i>Disable relay
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

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