{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
  Postfix queue. Administrator-only: the queue lists senders and recipients
  belonging to every tenant on the server.
{% endcomment %}

{% block title %}Mail queue{% endblock %}

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

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Mail queue</h1>
      <p class="text-muted mb-0 small">
        Messages Postfix has accepted but not yet delivered, with the reason each
        one is still waiting.
      </p>
    </div>
    <div class="d-flex gap-2">
      <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>
      <button class="btn btn-primary btn-sm" type="button" ng-click="flush()"
              ng-disabled="busy || !queue.length">
        <i class="fas fa-paper-plane me-1"></i>Flush queue
      </button>
      <button class="btn btn-outline-danger btn-sm" type="button" ng-click="deleteAll()"
              ng-disabled="busy || !queue.length">
        <i class="fas fa-trash me-1"></i>Delete all
      </button>
    </div>
  </div>

  <div class="row g-3 mb-4" ng-cloak>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small text-uppercase">Queued</div>
        <div class="h4 mb-0" ng-bind="summary.total || 0"></div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small text-uppercase">Active</div>
        <div class="h4 mb-0" ng-bind="summary.active || 0"></div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small text-uppercase">Deferred</div>
        <div class="h4 mb-0" ng-bind="summary.deferred || 0"></div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card h-100"><div class="card-body py-3">
        <div class="text-muted small text-uppercase">Total size</div>
        <div class="h4 mb-0" ng-bind="formatBytes(summary.bytes || 0)"></div>
      </div></div>
    </div>
  </div>

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

      <div class="row g-3 align-items-end mb-3">
        <div class="col-md-6">
          <label class="form-label" for="cpFilter">Filter</label>
          <input type="search" class="form-control" id="cpFilter" ng-model="filter"
                 placeholder="Queue ID, sender or recipient…">
        </div>
        <div class="col-md-4">
          <label class="form-label" for="cpStatus">Status</label>
          <select class="form-select" id="cpStatus" ng-model="statusFilter">
            <option value="">All</option>
            <option value="active">Active</option>
            <option value="deferred">Deferred</option>
            <option value="hold">On hold</option>
          </select>
        </div>
      </div>

      <div class="alert alert-success py-2 px-3" ng-show="!busy && !queue.length" ng-cloak>
        <i class="fas fa-circle-check me-1"></i>The mail queue is empty.
      </div>

      <div class="table-responsive" ng-show="queue.length" ng-cloak>
        <table class="table table-hover align-middle">
          <thead>
            <tr>
              <th scope="col">Queue ID</th>
              <th scope="col">Status</th>
              <th scope="col">Size</th>
              <th scope="col">Arrived</th>
              <th scope="col">Sender</th>
              <th scope="col">Recipients</th>
              <th scope="col">Reason held up</th>
              <th scope="col" class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in queue | filter:{ status: statusFilter } | filter:filter">
              <td class="font-monospace" ng-bind="row.queueId"></td>
              <td>
                <span class="badge rounded-pill"
                      ng-class="{
                        'text-bg-success':   row.status === 'active',
                        'text-bg-warning':   row.status === 'deferred',
                        'text-bg-secondary': row.status === 'hold'
                      }"
                      ng-bind="row.status"></span>
              </td>
              <td ng-bind="formatBytes(row.size)"></td>
              <td class="small text-muted" ng-bind="row.arrival"></td>
              <td class="font-monospace small" ng-bind="row.sender"></td>
              <td class="font-monospace small">
                <div ng-repeat="rcpt in row.recipients" ng-bind="rcpt"></div>
              </td>
              <td class="small" ng-class="row.reason ? 'text-danger' : 'text-muted'"
                  ng-bind="row.reason || '—'"></td>
              <td class="text-end">
                <button class="btn btn-outline-danger btn-sm" type="button"
                        ng-click="remove(row)"
                        ng-attr-aria-label="Delete queued message {$ row.queueId $}">
                  <i class="fas fa-trash" aria-hidden="true"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

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

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