{% extends "baseTemplate/index.html" %}
{% load static %}
{# Forwarders. The source must be a domain you own; the destination need not be. #}

{% block title %}Email forwarding{% endblock %}

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

  <div class="mb-4">
    <h1 class="h4 mb-1">Email forwarding</h1>
    <p class="text-muted mb-0 small">
      Deliver mail addressed to one of your addresses somewhere else. Adding the
      same source twice fans the message out to both destinations, which is how
      a small distribution list is built.
    </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">
      <form novalidate ng-submit="create()">
        <div class="row g-3 align-items-end">

          <div class="col-md-3">
            <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-3">
            <label class="form-label" for="cpSource">Forward mail for</label>
            <div class="input-group">
              <input type="text" class="form-control" id="cpSource" ng-model="sourceLocal"
                     autocomplete="off" spellcheck="false" placeholder="info" required>
              <span class="input-group-text font-monospace"
                    ng-bind="(isPattern ? '*' : '') + '@' + domain"></span>
            </div>
            <div class="form-check mt-1">
              <input type="checkbox" class="form-check-input" id="cpIsPattern"
                     ng-model="isPattern">
              <label class="form-check-label small text-muted" for="cpIsPattern">
                Pattern: match every mailbox whose name starts with this prefix
              </label>
            </div>
          </div>

          <div class="col-md-4">
            <label class="form-label" for="cpDestination">Deliver it to</label>
            <input type="email" class="form-control" id="cpDestination"
                   ng-model="destination" autocomplete="off" spellcheck="false"
                   placeholder="someone@example.com" required>
          </div>

          <div class="col-md-2 d-grid">
            <button type="submit" class="btn btn-primary" ng-disabled="busy">
              <i class="fas fa-share me-1"></i>
              <span ng-bind="busy ? 'Adding…' : 'Add'"></span>
            </button>
          </div>
        </div>
        <div class="form-text mt-2" ng-show="isPattern" ng-cloak>
          Applies immediately to every mailbox on this domain that already matches, and
          to every one created afterwards -- e.g. <span class="font-monospace">sales*</span>
          catches <span class="font-monospace">sales-uk@</span> and
          <span class="font-monospace">sales-us@</span>.
        </div>
      </form>
    </div>
  </div>

  <div class="card">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h6 mb-0">Existing forwarders</h2>
        <button class="btn btn-outline-secondary btn-sm" type="button" ng-click="load()"
                ng-disabled="busy">
          <i class="fas fa-rotate me-1"></i>Refresh
        </button>
      </div>

      <div class="alert alert-secondary py-2 px-3" ng-show="!busy && !forwardings.length" ng-cloak>
        No forwarders on this domain.
      </div>

      <div class="table-responsive" ng-show="forwardings.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">Source</th>
              <th scope="col" style="width: 3rem;"></th>
              <th scope="col">Destination</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in forwardings">
              <td class="font-monospace">
                <span ng-bind="row.source"></span>
                <span class="badge bg-info-subtle text-info-emphasis ms-1" ng-show="row.pattern">
                  pattern
                </span>
                <span class="badge bg-warning-subtle text-warning-emphasis ms-1"
                      ng-show="row.catchAll">
                  catch-all
                </span>
              </td>
              <td class="text-muted"><i class="fas fa-arrow-right"></i></td>
              <td class="font-monospace" ng-bind="row.destination"></td>
              <td class="text-end">
                <button class="btn btn-outline-danger btn-sm" type="button"
                        ng-click="remove(row)">
                  <i class="fas fa-trash me-1"></i>Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

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

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