{{> header.html page_title="Quarantine" header_widgets="" }}

<link rel="stylesheet" href="{{assets}}/css/design-v2-common.css" media="all" nonce="{{nonce}}">

<style>
  {{custom_css}}

  /* ============================================================
   * Quarantine page styles. Layered on top of the generic .tv-*
   * threat-view component CSS. Page-specific classes are .qr-*.
   *
   * Note: table rows are server-rendered (see render_quarantine_row()
   * in src/dashboard.php) and still emit Bootstrap classes — so a
   * small shim re-skins those to fit the .tv-table shell. When the
   * row renderer is rewritten to emit .tv-* classes natively, the
   * shim block can be deleted.
   * ============================================================ */

  /* Info-variant of the standalone callout: blue accent, neutral panel
     background. Used here because the quarantine explainer is purely
     informational, not a warning. */
  .tv-callout.is-info {
    border-left-color: var(--blue);
    background: var(--bg-panel);
  }
  .tv-callout.is-info .tv-callout-head { color: var(--blue); }

  /* Path cell — mono, bright filename, dim parent directory. */
  .qr-path {
    font-family: var(--mono);
    color: var(--fg);
    font-weight: 500;
    word-break: break-all;
    letter-spacing: -0.005em;
  }
  .qr-path .dir { color: var(--fg-dimmer); font-weight: 400; }

  /* Meta cells (size, date) — mono, dim. */
  .qr-meta {
    font-family: var(--mono);
    color: var(--fg-dim);
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  /* Inline preview row injected under a file row. The `text-align: right`
     rule on `.tv-table tbody td:last-child` would otherwise right-align
     the preview content (the colspan'd td is also the last child). */
  .qr-preview-row td {
    padding: 0 !important;
    background: var(--bg) !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .qr-preview {
    display: block;
    margin: 0;
    padding: 14px 22px;
    font-family: var(--mono);
    font-size: var(--fs-sm);
    color: var(--fg-dim);
    background: var(--bg);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow: auto;
  }

  /* Pagination strip — mono, dim, mirrors the .al-foot pattern. */
  .qr-pager {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 4px;
    font-family: var(--mono);
    color: var(--fg-dimmer);
    letter-spacing: 0.02em;
  }
  .qr-pager .num { color: var(--fg-dim); font-weight: 500; }
  .qr-pager .spacer { flex: 1; }
  .qr-pager a, .qr-pager span.qr-page-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    border-radius: var(--bf-r-sm);
    border: 1px solid var(--border);
    background: var(--bg-raised);
    color: var(--fg-dim);
    text-decoration: none;
    transition: color .12s, border-color .12s, background .12s;
  }
  .qr-pager a:hover {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-bg);
  }
  .qr-pager .disabled .qr-page-link,
  .qr-pager .page-item.disabled .page-link {
    opacity: 0.4; pointer-events: none;
  }

  /* Hide the server-rendered Status column. render_quarantine_row()
     in src/dashboard.php still emits 5 <td>s; the 4th is the status
     badge, which we no longer surface here. When the row renderer is
     rewritten, drop both this rule and the colspan override below. */
  .tv-table#qr-table tbody td:nth-child(4) { display: none; }

  /* ── Compatibility shim for server-rendered rows ────────────
     The PHP renderer still emits Bootstrap `.badge bg-*` and
     `.btn-outline-*` classes. Re-skin them so they match the new
     shell without requiring a PHP rewrite. */
  .tv-table .badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: var(--bf-r-pill);
    font-family: var(--sans); font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    border: 1px solid;
    line-height: 1.3;
  }
  .tv-table .badge.bg-danger        { color: var(--red);    background: var(--red-bg);    border-color: var(--red-border); }
  .tv-table .badge.bg-warning       { color: var(--amber);  background: var(--amber-bg);  border-color: var(--amber-border); }
  .tv-table .badge.bg-secondary     { color: var(--fg-dim); background: var(--bg-raised); border-color: var(--border); }

  /* Re-skin row action buttons to look like .tv-icon-btn / .tv-btn. */
  .tv-table .btn-sm.qr-restore-btn,
  .tv-table .btn-sm.qr-delete-btn,
  .tv-table .btn-sm.qr-preview-btn,
  .tv-table .btn-sm[disabled] {
    display: inline-flex; align-items: center; gap: 4px;
    height: 26px;
    padding: 0 8px !important;
    margin: 0;
    border-radius: var(--bf-r-sm);
    border: 1px solid var(--border) !important;
    background: var(--bg-raised) !important;
    color: var(--fg-dim) !important;
    font-family: var(--mono);
    font-size: var(--fs-sm) !important;
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
    opacity: 1;
  }
  .tv-table .qr-restore-btn:hover:not(:disabled) {
    color: var(--green) !important;
    border-color: var(--green-border) !important;
    background: var(--green-bg) !important;
  }
  .tv-table .qr-delete-btn:hover:not(:disabled) {
    color: var(--red) !important;
    border-color: var(--red-border) !important;
    background: var(--red-bg) !important;
  }
  .tv-table .qr-preview-btn:hover:not(:disabled) {
    color: var(--accent) !important;
    border-color: var(--accent-border) !important;
    background: var(--accent-bg) !important;
  }
  .tv-table .btn-sm:disabled { opacity: 0.4 !important; cursor: not-allowed; }
  .tv-table .btn-sm .fe { font-size: 13px; line-height: 1; }

  /* Row tint for status — keyed off the badge inside the row. */
  .tv-table tbody tr:has(.badge.bg-danger)  td { background: oklch(from var(--red-bg)   l c h / 0.35); }
  .tv-table tbody tr:has(.badge.bg-warning) td { background: oklch(from var(--amber-bg) l c h / 0.30); }
  .tv-table tbody tr:has(.badge.bg-danger):hover  td { background: oklch(from var(--red-bg)   l c h / 0.65); }
  .tv-table tbody tr:has(.badge.bg-warning):hover td { background: oklch(from var(--amber-bg) l c h / 0.60); }
</style>


<script type="text/javascript" nonce="{{nonce}}">
  window.BITFIRE_NONCE = '{{api_code}}';
</script>


<div class="bf-man-content">

  <div class="tv-shell">

    <!-- ============== HERO ============== -->
    <section class="tv-hero">
      <h1>
        Quarantine
        <span class="tv-count-pill"><span class="num">{{- total_entries }}</span>&nbsp;files</span>
      </h1>

      <!-- Info callout: explains what quarantine is. -->
      <div class="tv-callout is-info fs-body">
        <div class="tv-callout-head">
          <span>What is quarantine?</span>
        </div>
        <p>
          When BitFire removes a file during malware cleanup, the original is moved here instead of
          being permanently deleted. <strong>Restore</strong> a file if it was removed by mistake, or
          <strong>delete</strong> it when you are sure it isn't needed.
        </p>
        <p class="tv-mt-2 fs-sm">
          Storage path: <code>{{- qpath_display }}</code>
        </p>
      </div>
    </section>

    <!-- ============== QUARANTINED FILES SECTION ============== -->
    <section class="tv-section">
      <div class="tv-section-head">
        <div class="tv-section-head-text">
          <div class="tv-section-eyebrow">01 &middot; Cleaned files</div>
          <h2>
            Quarantined files
            <span class="tv-count-pill"><span class="num">{{- total_entries }}</span>&nbsp;total</span>
          </h2>
          <p class="tv-section-blurb fs-lg">
            One row per file moved here during cleanup. Restore re-injects the original into its
            previous location; delete drops it permanently.
          </p>
        </div>
        <div class="tv-section-actions">
          <a href="{{- malware_url }}" class="tv-btn fs-md" title="Return to the Malware Scanner">
            <span class="ic" aria-hidden="true">&larr;</span>
            <span class="tv-btn-label">Malware Scanner</span>
          </a>
          <button id="qr-clear-all-btn"
                  class="tv-btn is-bad fs-md {{- has_entries }}"
                  type="button"
                  title="Permanently delete all quarantined files">
            <span class="ic" aria-hidden="true">&times;</span>
            <span class="tv-btn-label">Clear all</span>
          </button>
        </div>
      </div>

      <!-- Empty state -->
      <div class="tv-empty {{- has_no_entries }}">
        <div class="tv-empty-icon" aria-hidden="true">&#10003;</div>
        <p class="tv-empty-title fs-body">Quarantine is empty.</p>
        <p class="tv-empty-sub">
          No files have been quarantined. When BitFire removes or repairs a file, the original will appear here.
        </p>
      </div>

      <!-- Has-entries block -->
      <div class="{{- has_entries }}">

        <!-- Top pager -->
        <div class="qr-pager fs-sm">
          <span>Showing&nbsp;<span class="num">{{- page_from }}</span>&ndash;<span class="num">{{- page_to }}</span>&nbsp;of&nbsp;<span class="num">{{- total_entries }}</span></span>
          <span class="spacer"></span>
          <span class="page-item {{- prev_disabled }}"><a class="page-link qr-page-link" href="{{- prev_url }}">&laquo;&nbsp;Newer</a></span>
          <span class="page-item {{- next_disabled }}"><a class="page-link qr-page-link" href="{{- next_url }}">Older&nbsp;&raquo;</a></span>
        </div>

        <!-- Table -->
        <div class="tv-table-wrap">
          <table class="tv-table" id="qr-table">
            <thead>
              <tr>
                <th>Original path</th>
                <th style="width:140px;">Quarantined</th>
                <th style="width:90px;">Size</th>
                <th style="width:200px;">Actions</th>
              </tr>
            </thead>
            <tbody id="qr-tbody">
              {{ rows }}
            </tbody>
          </table>
        </div>

        <!-- Bottom pager -->
        <div class="qr-pager fs-sm">
          <span>Page&nbsp;<span class="num">{{- current_page }}</span>&nbsp;of&nbsp;<span class="num">{{- total_pages }}</span></span>
          <span class="spacer"></span>
          <span class="page-item {{- prev_disabled }}"><a class="page-link qr-page-link" href="{{- prev_url }}">&laquo;&nbsp;Newer</a></span>
          <span class="page-item {{- next_disabled }}"><a class="page-link qr-page-link" href="{{- next_url }}">Older&nbsp;&raquo;</a></span>
        </div>

      </div><!-- /has_entries -->
    </section>

  </div><!-- /tv-shell -->
</div><!-- /bf-man-content -->


<script type="text/javascript" nonce="{{nonce}}">
(function () {
  'use strict';

  function escapeHtml(s) {
    return String(s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
      .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }

  /* ── Restore ────────────────────────────────────────────────── */
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.qr-restore-btn');
    if (!btn) return;
    e.preventDefault();
    var qpath = btn.getAttribute('data-qpath');
    if (!qpath || !confirm('Restore this file to its original location?\n\nIf a file currently exists there, it will be swapped into quarantine.')) return;

    btn.disabled = true;
    btn.innerHTML = '<i class="fe fe-loader"></i>';

    BitFire_api('quarantine_restore', { quarantine_path: qpath })
      .then(function (r) { return r.json(); })
      .then(function (res) {
        if (res && res.success) {
          var row = btn.closest('tr');
          if (row) { row.classList.add('is-removing'); row.style.opacity = '.5'; }
          btn.innerHTML = '<i class="fe fe-check"></i> Restored';
          setTimeout(function () { window.location.reload(); }, 800);
        } else {
          btn.disabled = false;
          btn.innerHTML = '<i class="fe fe-rotate-ccw"></i> Restore';
          alert('Restore failed: ' + ((res && res.note) || (res && res.message) || 'unknown error'));
        }
      })
      .catch(function () {
        btn.disabled = false;
        btn.innerHTML = '<i class="fe fe-rotate-ccw"></i> Restore';
      });
  });

  /* ── Delete permanently ─────────────────────────────────────── */
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.qr-delete-btn');
    if (!btn) return;
    e.preventDefault();
    var qpath = btn.getAttribute('data-qpath');
    if (!qpath || !confirm('Permanently delete this quarantined file?\n\nThis cannot be undone.')) return;

    btn.disabled = true;
    btn.innerHTML = '<i class="fe fe-loader"></i>';

    BitFire_api('quarantine_delete', { quarantine_path: qpath })
      .then(function (r) { return r.json(); })
      .then(function (res) {
        if (res && res.success) {
          var row = btn.closest('tr');
          if (row) { row.remove(); }
        } else {
          btn.disabled = false;
          btn.innerHTML = '<i class="fe fe-trash-2"></i>';
          alert('Delete failed: ' + ((res && res.note) || (res && res.message) || 'unknown error'));
        }
      })
      .catch(function () {
        btn.disabled = false;
        btn.innerHTML = '<i class="fe fe-trash-2"></i>';
      });
  });

  /* ── Preview (toggle inline 2 KB read) ──────────────────────── */
  document.addEventListener('click', function (e) {
    var btn = e.target.closest('.qr-preview-btn');
    if (!btn) return;
    e.preventDefault();
    var row = btn.closest('tr');
    if (!row) return;

    var existing = row.nextElementSibling;
    if (existing && existing.classList.contains('qr-preview-row')) {
      existing.remove();
      return;
    }

    var qpath = btn.getAttribute('data-qpath');
    btn.disabled = true;
    btn.innerHTML = '<i class="fe fe-loader"></i>';

    BitFire_api('quarantine_preview', { quarantine_path: qpath })
      .then(function (r) { return r.json(); })
      .then(function (res) {
        btn.disabled = false;
        btn.innerHTML = '<i class="fe fe-eye"></i>';
        if (res && res.success && res.data && res.data.content) {
          var previewRow = document.createElement('tr');
          previewRow.className = 'qr-preview-row';
          previewRow.innerHTML = '<td colspan="5"><pre class="qr-preview">'
            + escapeHtml(res.data.content) + '</pre></td>';
          row.after(previewRow);
        }
      })
      .catch(function () {
        btn.disabled = false;
        btn.innerHTML = '<i class="fe fe-eye"></i>';
      });
  });

  /* ── Clear all ──────────────────────────────────────────────── */
  var clearBtn = document.getElementById('qr-clear-all-btn');
  if (clearBtn) {
    clearBtn.addEventListener('click', function () {
      if (!confirm('Permanently delete ALL quarantined files?\n\nThis cannot be undone.')) return;

      clearBtn.disabled = true;
      var label = clearBtn.querySelector('.tv-btn-label');
      if (label) label.textContent = 'Clearing…';

      BitFire_api('quarantine_clear_all', {})
        .then(function (r) { return r.json(); })
        .then(function (res) {
          if (res && res.success) {
            window.location.reload();
          } else {
            clearBtn.disabled = false;
            if (label) label.textContent = 'Clear all';
            alert('Clear failed: ' + ((res && res.note) || 'unknown error'));
          }
        })
        .catch(function () {
          clearBtn.disabled = false;
          if (label) label.textContent = 'Clear all';
        });
    });
  }

})();
</script>