{% extends "base.html" %}
{% block title %}Info Ops Reports — ICDEV™{% endblock %}
{% block extra_css %}
<style>
.iop-header { background: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%); padding:28px 32px; border-radius:12px; margin-bottom:24px; border:1px solid #1e3a5f; }
.iop-header h1 { margin:0; font-size:1.6rem; font-weight:700; color:#e0e7ff; }
.iop-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:20px; }
.iop-card h3 { margin:0 0 10px; font-size:1rem; color:#e2e8f0; }
.iop-btn { display:inline-block; padding:8px 16px; border-radius:6px; font-size:.8rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; }
.iop-btn-primary  { background:#2563eb; color:#fff; }
.iop-btn-secondary{ background:#1e293b; color:#94a3b8; border:1px solid #334155; }
.iop-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.iop-table th { text-align:left; padding:10px 12px; background:#0f172a; color:#94a3b8; font-weight:600; border-bottom:1px solid #334155; }
.iop-table td { padding:10px 12px; border-bottom:1px solid #334155; color:#e2e8f0; }
.iop-table tr:hover td { background:#252f47; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:.7rem; font-weight:600; }
.badge-green { background:rgba(34,197,94,.15); color:#22c55e; }
.badge-yellow { background:rgba(251,191,36,.15); color:#fbbf24; }
.search-box { width:100%; max-width:320px; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:8px 12px; color:#e2e8f0; font-size:.85rem; }
</style>
{% endblock %}
{% block content %}

<div class="iop-header">
  <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
    <div>
      <h1>Report Library</h1>
      <p style="color:#94a3b8;margin:6px 0 0;">Generate, review, and export information operations reports</p>
    </div>
    <div style="display:flex;gap:10px;">
      <a href="/info-ops/dashboard" class="iop-btn iop-btn-secondary">Dashboard</a>
      <a href="/info-ops/analysis" class="iop-btn iop-btn-primary">+ New Report</a>
    </div>
  </div>
</div>

<div style="margin-bottom:12px;color:#64748b;font-size:.8rem;">
  <a href="/" style="color:#64748b;text-decoration:none;">Home</a> /
  <a href="/info-ops/" style="color:#64748b;text-decoration:none;">Info Ops</a> / Reports
</div>

<div class="iop-card" style="margin-bottom:20px;">
  <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
    <input type="text" class="search-box" id="reportSearch" placeholder="Search reports..." onkeyup="filterReports()">
    <div style="display:flex;gap:10px;">
      <button class="iop-btn iop-btn-secondary" onclick="exportAll('csv')">Export All CSV</button>
      <button class="iop-btn iop-btn-secondary" onclick="exportAll('pdf')">Export All PDF</button>
    </div>
  </div>

  <table class="iop-table" id="reportsTable">
    <thead>
      <tr><th>ID</th><th>Title</th><th>Date</th><th>Status</th><th>Actions</th></tr>
    </thead>
    <tbody>
      <tr data-title="Q2 Information Environment Assessment">
        <td>rpt-001</td>
        <td>Q2 Information Environment Assessment</td>
        <td>2026-05-10</td>
        <td><span class="badge badge-green">Final</span></td>
        <td>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-001','csv')">CSV</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-001','pdf')">PDF</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-001','png')">PNG</button>
        </td>
      </tr>
      <tr data-title="Social Media Narrative Analysis">
        <td>rpt-002</td>
        <td>Social Media Narrative Analysis</td>
        <td>2026-05-12</td>
        <td><span class="badge badge-yellow">Draft</span></td>
        <td>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-002','csv')">CSV</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-002','pdf')">PDF</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-002','png')">PNG</button>
        </td>
      </tr>
      <tr data-title="OSINT Feed Quality Review">
        <td>rpt-003</td>
        <td>OSINT Feed Quality Review</td>
        <td>2026-05-14</td>
        <td><span class="badge badge-green">Final</span></td>
        <td>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-003','csv')">CSV</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-003','pdf')">PDF</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-003','png')">PNG</button>
        </td>
      </tr>
      <tr data-title="Influence Campaign Assessment">
        <td>rpt-004</td>
        <td>Influence Campaign Assessment</td>
        <td>2026-05-15</td>
        <td><span class="badge badge-yellow">Draft</span></td>
        <td>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-004','csv')">CSV</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-004','pdf')">PDF</button>
          <button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="downloadReport('rpt-004','png')">PNG</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<script>
function filterReports() {
  var q = document.getElementById('reportSearch').value.toLowerCase();
  var rows = document.querySelectorAll('#reportsTable tbody tr');
  rows.forEach(function(row) {
    var title = row.getAttribute('data-title').toLowerCase();
    row.style.display = title.indexOf(q) !== -1 ? '' : 'none';
  });
}
function downloadReport(id, fmt) {
  var blob, filename;
  if (fmt === 'csv') {
    blob = new Blob(['Report ID,Title,Date,Status\n'+id+',Sample Report,2026-05-15,Final'], {type: 'text/csv'});
    filename = id + '.csv';
  } else if (fmt === 'pdf') {
    blob = new Blob(['Report ' + id + '\n\nThis is a sample PDF export.'], {type: 'text/plain'});
    filename = id + '.txt';
  } else {
    blob = new Blob(['Report ' + id + ' image data placeholder'], {type: 'text/plain'});
    filename = id + '.txt';
  }
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
}
function exportAll(fmt) {
  downloadReport('all-reports', fmt);
}
</script>

{% endblock %}