{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
Mail overview: the /email/ landing page every other mail tool's sidebar group
opens from. One row per domain (mailbox count vs the package allowance,
catch-all and DKIM at a glance), plus a card of links to every mail tool --
so a domain with fifty mailboxes is not the only way to discover that
autoresponders or a catch-all exist.
{% endcomment %}

{% block title %}Mail overview{% endblock %}

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

  <div class="mb-4">
    <h1 class="h4 mb-1">Mail overview</h1>
    <p class="text-muted mb-0 small">
      Every domain you manage mail for, and every mail tool in one place.
    </p>
  </div>

  <div class="row g-4">
    <div class="col-lg-8">
      <div class="card">
        <div class="card-body">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h2 class="h6 mb-0">Domains</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>

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

          <div class="alert alert-secondary py-2 px-3" ng-show="!busy && !rows.length" ng-cloak>
            No mail domains yet.
          </div>

          <div class="table-responsive" ng-show="rows.length" ng-cloak>
            <table class="table table-hover align-middle">
              <thead>
                <tr>
                  <th scope="col">Domain</th>
                  <th scope="col">Mailboxes</th>
                  <th scope="col">Catch-all</th>
                  <th scope="col">DKIM</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="row in rows">
                  <td class="font-monospace">
                    <a href="/email/listEmails" ng-bind="row.domain"></a>
                  </td>
                  <td>
                    <span ng-bind="row.mailboxes"></span><span ng-show="!row.unlimited">
                      /<span ng-bind="row.quota"></span></span>
                    <span ng-show="row.unlimited" class="text-muted">(unlimited)</span>
                  </td>
                  <td>
                    <span class="cp-pill" ng-class="row.catchAll ? 'cp-pill--warn' : 'cp-pill--unknown'"
                          ng-bind="row.catchAll ? 'On' : 'Off'"></span>
                  </td>
                  <td>
                    <span class="cp-pill" ng-class="row.dkimConfigured ? 'cp-pill--up' : 'cp-pill--unknown'"
                          ng-bind="row.dkimConfigured ? 'Configured' : 'Not set up'"></span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

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

    <div class="col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h2 class="h6 mb-3">Mail tools</h2>
          <div class="list-group list-group-flush">
            <a class="list-group-item list-group-item-action" href="/email/createEmailAccount">
              <i class="fas fa-envelope-circle-check me-2"></i>Create mailbox</a>
            <a class="list-group-item list-group-item-action" href="/email/listEmails">
              <i class="fas fa-list me-2"></i>Mailboxes</a>
            <a class="list-group-item list-group-item-action" href="/email/emailForwarding">
              <i class="fas fa-share me-2"></i>Forwarding</a>
            <a class="list-group-item list-group-item-action" href="/email/catchAll">
              <i class="fas fa-inbox me-2"></i>Catch-all</a>
            <a class="list-group-item list-group-item-action" href="/email/autoresponder">
              <i class="fas fa-plane me-2"></i>Autoresponders</a>
            <a class="list-group-item list-group-item-action" href="/email/dkimManager">
              <i class="fas fa-key me-2"></i>DKIM manager</a>
            <a class="list-group-item list-group-item-action" href="/email/emailLimits">
              <i class="fas fa-gauge-high me-2"></i>Email limits</a>
            {% if isAdmin %}
            <a class="list-group-item list-group-item-action" href="/email/spamFilter">
              <i class="fas fa-shield-halved me-2"></i>Spam filter</a>
            <a class="list-group-item list-group-item-action" href="/email/smtpRelay">
              <i class="fas fa-paper-plane me-2"></i>SMTP relay</a>
            <a class="list-group-item list-group-item-action" href="/email/mailQueue">
              <i class="fas fa-server me-2"></i>Mail queue</a>
            {% endif %}
            <a class="list-group-item list-group-item-action" href="/email/emailDebugger">
              <i class="fas fa-stethoscope me-2"></i>Email debugger</a>
            <a class="list-group-item list-group-item-action" href="/email/accessWebmail"
               target="_blank" rel="noopener">
              <i class="fas fa-arrow-up-right-from-square me-2"></i>Webmail</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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