{% extends "base.html" %}
{% block title %}Info Ops OSINT — 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; }
.badge-red { background:rgba(239,68,68,.15); color:#ef4444; }
.badge-blue { background:rgba(96,165,250,.15); color:#60a5fa; }
</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>OSINT Data Browser</h1>
      <p style="color:#94a3b8;margin:6px 0 0;">Browse and manage open-source intelligence feeds</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 Analysis</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> / OSINT
</div>

<div class="iop-card" style="margin-bottom:20px;">
  <h3>Active Feeds</h3>
  <table class="iop-table" id="osintTable">
    <thead>
      <tr><th>ID</th><th>Source</th><th>Category</th><th>Status</th><th>Last Update</th><th>Actions</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>osint-001</td>
        <td>Twitter/X</td>
        <td><span class="badge badge-blue">Social</span></td>
        <td><span class="badge badge-green">Active</span></td>
        <td>2026-05-15 14:30</td>
        <td><button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="viewFeed('osint-001')">View</button></td>
      </tr>
      <tr>
        <td>osint-002</td>
        <td>NewsAPI</td>
        <td><span class="badge badge-blue">News</span></td>
        <td><span class="badge badge-green">Active</span></td>
        <td>2026-05-15 13:15</td>
        <td><button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="viewFeed('osint-002')">View</button></td>
      </tr>
      <tr>
        <td>osint-003</td>
        <td>RSS Mil-Intel</td>
        <td><span class="badge badge-blue">Defense</span></td>
        <td><span class="badge badge-green">Active</span></td>
        <td>2026-05-15 12:00</td>
        <td><button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="viewFeed('osint-003')">View</button></td>
      </tr>
      <tr>
        <td>osint-004</td>
        <td>Dark Web Monitor</td>
        <td><span class="badge badge-blue">Cyber</span></td>
        <td><span class="badge badge-yellow">Warning</span></td>
        <td>2026-05-14 22:00</td>
        <td><button class="iop-btn iop-btn-secondary" style="padding:4px 10px;font-size:.75rem;" onclick="viewFeed('osint-004')">View</button></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="iop-card">
  <h3>Feed Preview</h3>
  <div id="feedPreview" style="background:#0f172a;border:1px solid #334155;border-radius:8px;padding:16px;min-height:120px;color:#94a3b8;font-size:.85rem;">
    Select a feed to view preview data.
  </div>
</div>

<script>
function viewFeed(id) {
  var preview = document.getElementById('feedPreview');
  var data = {
    'osint-001': '<strong>Twitter/X Feed</strong><br>Latest: 3 new narratives detected in the last hour. Sentiment trending negative in region EUR-NE.',
    'osint-002': '<strong>NewsAPI Feed</strong><br>Latest: 47 articles indexed. Top topic: cybersecurity legislation.',
    'osint-003': '<strong>RSS Mil-Intel Feed</strong><br>Latest: 12 new defense briefs. 2 flagged for Info Ops relevance.',
    'osint-004': '<strong>Dark Web Monitor</strong><br>Latest: 5 new forum posts. 1 potential data leak identified. Requires review.'
  };
  preview.innerHTML = data[id] || 'No preview available.';
  preview.style.color = '#e2e8f0';
}

// Poll for feed updates every 30s
setInterval(function() {
  fetch('/info-ops/api/osint')
    .then(function(r){ return r.json(); })
    .then(function(d){ console.log('OSINT feeds updated', d); })
    .catch(function(){});
}, 30000);
</script>

{% endblock %}