{% extends "baseTemplate/index.html" %}
{% load static %}
{# Mailbox list for one domain, scoped server-side to the owning website. #}

{% block title %}Email accounts{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Email accounts</h1>
      <p class="text-muted mb-0 small">
        Mailboxes on the domains you manage, with their Maildir size on disk.
      </p>
    </div>
    <a class="btn btn-primary btn-sm" href="/email/createEmailAccount">
      <i class="fas fa-plus me-1"></i>New mailbox
    </a>
  </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-5">
          <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-5">
          <label class="form-label" for="cpFilter">Filter</label>
          <input type="search" class="form-control" id="cpFilter" ng-model="filter"
                 placeholder="Search addresses…">
        </div>
        <div class="col-md-2 d-grid">
          <button class="btn btn-outline-secondary" type="button" ng-click="load()"
                  ng-disabled="busy">
            <i class="fas fa-rotate me-1"></i>Refresh
          </button>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-body">

      <div class="d-flex justify-content-between align-items-center mb-3" ng-cloak>
        <h2 class="h6 mb-0">
          <span ng-bind="(emails | filter:filter).length"></span> mailbox(es)
        </h2>
        <span class="badge rounded-pill text-bg-secondary" ng-show="usageLoaded">
          <span ng-bind="usage.used"></span> /
          <span ng-bind="usage.unlimited ? '∞' : usage.quota"></span> used
        </span>
      </div>

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

      <div class="table-responsive" ng-show="emails.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">Address</th>
              <th scope="col">Disk usage</th>
              <th scope="col">Created</th>
              <th scope="col">Status</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in emails | filter:filter">
              <td class="font-monospace" ng-bind="row.email"></td>
              <td style="min-width: 10rem;">
                <div class="d-flex justify-content-between small">
                  <span ng-bind="row.diskUsage"></span>
                  <span class="text-muted" ng-show="row.quotaMB">
                    of <span ng-bind="row.quotaMB"></span> MB
                  </span>
                  <a href="" ng-click="openQuota(row); $event.preventDefault()"
                     ng-hide="row.quotaMB">set quota</a>
                </div>
                <div cp-progress="row.usagePercent" ng-show="row.quotaMB"></div>
              </td>
              <td class="text-muted small" ng-bind="row.created"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="row.active ? 'text-bg-success' : 'text-bg-secondary'"
                      ng-bind="row.active ? 'Active' : 'Disabled'"></span>
              </td>
              <td class="text-end">
                <button class="btn btn-outline-secondary btn-sm" type="button"
                        ng-click="openQuota(row)">
                  <i class="fas fa-gauge-high me-1"></i>Quota
                </button>
                <button class="btn btn-outline-secondary btn-sm ms-1" type="button"
                        ng-click="openPassword(row)">
                  <i class="fas fa-key me-1"></i>Password
                </button>
                <button class="btn btn-outline-danger btn-sm ms-1" type="button"
                        ng-click="remove(row)">
                  <i class="fas fa-trash me-1"></i>Delete
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="card mt-3" ng-show="passwordTarget" ng-cloak>
        <div class="card-body">
          <h3 class="h6 mb-3">
            Change password for
            <span class="font-monospace" ng-bind="passwordTarget"></span>
          </h3>
          <form novalidate ng-submit="savePassword()">
            <div class="row g-2 align-items-end">
              <div class="col-md-7">
                <label class="form-label" for="cpNewPw">New password</label>
                <input type="password" class="form-control" id="cpNewPw"
                       ng-model="newPassword" autocomplete="new-password" required>
                <div class="form-text">
                  At least {{ minPasswordLength }} characters.
                </div>
              </div>
              <div class="col-md-5 d-flex gap-2">
                <button type="submit" class="btn btn-primary" ng-disabled="busy">
                  <i class="fas fa-check me-1"></i>Save
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        ng-click="closePassword()">Cancel</button>
              </div>
            </div>
          </form>
        </div>
      </div>

      <div class="card mt-3" ng-show="quotaTarget" ng-cloak>
        <div class="card-body">
          <h3 class="h6 mb-3">
            Disk quota for
            <span class="font-monospace" ng-bind="quotaTarget"></span>
          </h3>
          <form novalidate ng-submit="saveQuota()">
            <div class="row g-2 align-items-end">
              <div class="col-md-7">
                <label class="form-label" for="cpQuota">Quota (MB)</label>
                <input type="number" class="form-control" id="cpQuota"
                       ng-model="newQuotaMB" min="0" max="1000000">
                <div class="form-text">
                  0 means unlimited. This is informational only -- it is not enforced at
                  delivery time.
                </div>
              </div>
              <div class="col-md-5 d-flex gap-2">
                <button type="submit" class="btn btn-primary" ng-disabled="busy">
                  <i class="fas fa-check me-1"></i>Save
                </button>
                <button type="button" class="btn btn-outline-secondary"
                        ng-click="closeQuota()">Cancel</button>
              </div>
            </div>
          </form>
        </div>
      </div>

    </div>
  </div>

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

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