backupchecks/containers/backupchecks/src/templates/main/admin_all_mail.html

{% extends "layout/base.html" %}

<style>
  .modal-xxl { max-width: 98vw; }
  @media (min-width: 1400px) { .modal-xxl { max-width: 1400px; } }

  #msg_body_container_iframe { height: 55vh; }
  #msg_objects_container { max-height: 25vh; overflow: auto; }

  .filter-card .form-label { font-size: 0.85rem; }
</style>

{# Pager macro must be defined before it is used #}
{% macro pager(position, page, total_pages, has_prev, has_next, filter_params) -%}
<div class="d-flex justify-content-between align-items-center my-2">
  <div>
    {% if has_prev %}
      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('main.admin_all_mails', page=page-1, **filter_params) }}">Previous</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm" disabled>Previous</button>
    {% endif %}
    {% if has_next %}
      <a class="btn btn-outline-secondary btn-sm ms-2" href="{{ url_for('main.admin_all_mails', page=page+1, **filter_params) }}">Next</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm ms-2" disabled>Next</button>
    {% endif %}
  </div>

  <div class="d-flex align-items-center">
    <span class="me-2">Page {{ page }} of {{ total_pages }}</span>
    <form method="get" class="d-flex align-items-center mb-0">
      {% for k, v in filter_params.items() %}
        {% if v %}
          <input type="hidden" name="{{ k }}" value="{{ v }}" />
        {% endif %}
      {% endfor %}
      <label for="page_{{ position }}" class="form-label me-1 mb-0">Go to:</label>
      <input
        type="number"
        min="1"
        max="{{ total_pages }}"
        class="form-control form-control-sm me-1"
        id="page_{{ position }}"
        name="page"
        value="{{ page }}"
        style="width: 5rem;"
      />
      <button type="submit" class="btn btn-primary btn-sm">Go</button>
    </form>
  </div>
</div>
{%- endmacro %}

{% block content %}
<h2 class="mb-3">All Mail</h2>

<div class="card mb-3 filter-card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Search Filters</span>
    <div class="d-flex gap-3">
      <a class="small" href="{{ url_for('main.admin_all_mails') }}">Clear Filter Values</a>
      <button class="btn btn-primary btn-sm" type="submit" form="mailFilterForm">Search</button>
    </div>
  </div>
  <div class="card-body">
    <form id="mailFilterForm" method="get" action="{{ url_for('main.admin_all_mails') }}">
      <div class="row g-3">
        <div class="col-12 col-lg-3">
          <label class="form-label" for="from_q">From contains</label>
          <input class="form-control form-control-sm" type="text" id="from_q" name="from_q" value="{{ filter_params.from_q }}" />
        </div>
        <div class="col-12 col-lg-3">
          <label class="form-label" for="subject_q">Subject contains</label>
          <input class="form-control form-control-sm" type="text" id="subject_q" name="subject_q" value="{{ filter_params.subject_q }}" />
        </div>
        <div class="col-12 col-lg-3">
          <label class="form-label" for="backup_q">Backup contains</label>
          <input class="form-control form-control-sm" type="text" id="backup_q" name="backup_q" value="{{ filter_params.backup_q }}" />
        </div>
        <div class="col-12 col-lg-3">
          <label class="form-label" for="type_q">Type contains</label>
          <input class="form-control form-control-sm" type="text" id="type_q" name="type_q" value="{{ filter_params.type_q }}" />
        </div>

        <div class="col-12 col-lg-3">
          <label class="form-label" for="job_name_q">Job name contains</label>
          <input class="form-control form-control-sm" type="text" id="job_name_q" name="job_name_q" value="{{ filter_params.job_name_q }}" />
        </div>
        <div class="col-12 col-lg-3">
          <label class="form-label" for="received_from">Received &gt;=</label>
          <input class="form-control form-control-sm" type="datetime-local" id="received_from" name="received_from" value="{{ filter_params.received_from }}" />
        </div>
        <div class="col-12 col-lg-3">
          <label class="form-label" for="received_to">Received &lt;=</label>
          <input class="form-control form-control-sm" type="datetime-local" id="received_to" name="received_to" value="{{ filter_params.received_to }}" />
        </div>
        <div class="col-12 col-lg-3 d-flex align-items-end">
          <div class="form-check">
            <input class="form-check-input" type="checkbox" id="only_unlinked" name="only_unlinked" value="1" {% if filter_params.only_unlinked %}checked{% endif %} />
            <label class="form-check-label" for="only_unlinked">Only unlinked</label>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

{{ pager("top", page, total_pages, has_prev, has_next, filter_params) }}

<div class="table-responsive">
  <table class="table table-sm table-hover align-middle" id="mailAuditTable">
    <thead class="table-light">
      <tr>
        <th scope="col">Received</th>
        <th scope="col">From</th>
        <th scope="col">Subject</th>
        <th scope="col">Backup</th>
        <th scope="col">Type</th>
        <th scope="col">Job name</th>
        <th scope="col">Linked</th>
        <th scope="col">Parsed</th>
        <th scope="col">EML</th>
      </tr>
    </thead>
    <tbody>
      {% if rows %}
        {% for row in rows %}
          <tr class="mail-row" data-message-id="{{ row.id }}" style="cursor: pointer;">
            <td>{{ row.received_at }}</td>
            <td>{{ row.from_address }}</td>
            <td>{{ row.subject }}</td>
            <td>{{ row.backup_software }}</td>
            <td>{{ row.backup_type }}</td>
            <td>{{ row.job_name }}</td>
            <td>
              {% if row.linked %}
                <span class="badge bg-success">Linked</span>
              {% else %}
                <span class="badge bg-warning text-dark">Unlinked</span>
              {% endif %}
            </td>
            <td>{{ row.parsed_at }}</td>
            <td>
              {% if row.has_eml %}
                <a class="eml-download" href="{{ url_for('main.inbox_message_eml', message_id=row.id) }}" onclick="event.stopPropagation();">EML</a>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="9" class="text-center text-muted py-3">No messages found.</td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

{{ pager("bottom", page, total_pages, has_prev, has_next, filter_params) }}

<div class="modal fade" id="mailMessageModal" tabindex="-1" aria-labelledby="mailMessageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-xxl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="mailMessageModalLabel">Message details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-3">
            <dl class="row mb-0">
              <dt class="col-4">From</dt>
              <dd class="col-8" id="msg_from"></dd>

              <dt class="col-4">Backup</dt>
              <dd class="col-8" id="msg_backup"></dd>

              <dt class="col-4">Type</dt>
              <dd class="col-8" id="msg_type"></dd>

              <dt class="col-4">Job</dt>
              <dd class="col-8" id="msg_job"></dd>

              <dt class="col-4">Overall</dt>
              <dd class="col-8" id="msg_overall"></dd>

              <dt class="col-4">Customer</dt>
              <dd class="col-8" id="msg_customer"></dd>

              <dt class="col-4">Received</dt>
              <dd class="col-8" id="msg_received"></dd>

              <dt class="col-4">Parsed</dt>
              <dd class="col-8" id="msg_parsed"></dd>

              <dt class="col-4">Details</dt>
              <dd class="col-8" id="msg_overall_message" style="white-space: pre-wrap;"></dd>
            </dl>
          </div>

          <div class="col-md-9">
            <div class="border rounded p-2 p-0" style="overflow:hidden;">
              <iframe id="msg_body_container_iframe" class="w-100" style="height:55vh; border:0; background:transparent;" sandbox="allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"></iframe>
            </div>

            <div class="mt-3">
              <h6>Objects</h6>
              <div id="msg_objects_container"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
    function initAdminAllMailPopup() {
      var table = document.getElementById('mailAuditTable');
      var modalEl = document.getElementById('mailMessageModal');
      if (!table || !modalEl) return;

      // base.html loads Bootstrap JS after the page content. Initialize after DOMContentLoaded
      // so bootstrap.Modal is guaranteed to be available.
      if (typeof bootstrap === 'undefined' || !bootstrap.Modal) return;

      var modal = new bootstrap.Modal(modalEl);

      function setText(id, value) {
        var el = document.getElementById(id);
        if (el) el.textContent = value || '';
      }

      function renderObjects(objects) {
        var container = document.getElementById('msg_objects_container');
        if (!container) return;
        container.innerHTML = '';

        if (!objects || !objects.length) {
          container.innerHTML = '<div class="text-muted">No objects stored.</div>';
          return;
        }

        var tableHtml = '<div class="table-responsive"><table class="table table-sm table-hover align-middle">' +
          '<thead class="table-light"><tr><th>Name</th><th>Type</th><th>Status</th><th>Error</th></tr></thead><tbody>';

        for (var i = 0; i < objects.length; i++) {
          var o = objects[i] || {};
          tableHtml += '<tr>' +
            '<td>' + (o.name || '') + '</td>' +
            '<td>' + (o.type || '') + '</td>' +
            '<td>' + (o.status || '') + '</td>' +
            '<td style="white-space: pre-wrap;">' + (o.error_message || '') + '</td>' +
          '</tr>';
        }

        tableHtml += '</tbody></table></div>';
        container.innerHTML = tableHtml;
      }

      function setIframeHtml(html) {
        var iframe = document.getElementById('msg_body_container_iframe');
        if (!iframe) return;
        iframe.srcdoc = html || '<p>No message content stored.</p>';
      }

      async function openMessage(messageId) {
        try {
          var res = await fetch('{{ url_for('main.inbox_message_detail', message_id=0) }}'.replace('/0', '/' + messageId));
          if (!res.ok) throw new Error('Failed to load message');
          var data = await res.json();
          if (!data || data.status !== 'ok') throw new Error('Invalid response');

          var meta = data.meta || {};
          setText('msg_from', meta.from_address);
          setText('msg_backup', meta.backup_software);
          setText('msg_type', meta.backup_type);
          setText('msg_job', meta.job_name);
          setText('msg_overall', meta.overall_status);
          setText('msg_customer', meta.customer_name);
          setText('msg_received', meta.received_at);
          setText('msg_parsed', meta.parsed_at);
          setText('msg_overall_message', meta.overall_message);

          setIframeHtml(data.body_html);
          renderObjects(data.objects);

          modal.show();
        } catch (e) {
          alert('Unable to open message details.');
        }
      }

      table.addEventListener('click', function (e) {
        var tr = e.target.closest('tr.mail-row');
        if (!tr) return;
        var id = tr.getAttribute('data-message-id');
        if (!id) return;
        openMessage(id);
      });
    }

    document.addEventListener('DOMContentLoaded', initAdminAllMailPopup);
  })();
</script>

{% endblock %}