{% extends "base.html" %}
{% block title %}Info Ops Platform — ICDEV™{% endblock %}
{% block extra_css %}
<style>
.iop-header { background: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%); padding:40px 32px; border-radius:12px; margin-bottom:28px; text-align:center; border:1px solid #1e3a5f; }
.iop-header h1 { margin:0; font-size:2rem; font-weight:700; color:#e0e7ff; letter-spacing:.5px; }
.iop-header p  { margin:10px 0 0; color:#94a3b8; font-size:1rem; }
.iop-btn { display:inline-block; padding:10px 20px; border-radius:6px; font-size:.85rem; font-weight:600; text-decoration:none; cursor:pointer; border:none; transition:background .15s; }
.iop-btn-primary  { background:#2563eb; color:#fff; }
.iop-btn-primary:hover { background:#1d4ed8; }
.iop-btn-secondary{ background:#1e293b; color:#94a3b8; border:1px solid #334155; }
.iop-btn-secondary:hover { background:#334155; color:#e2e8f0; }
.iop-card { background:#1e293b; border:1px solid #334155; border-radius:10px; padding:24px; }
.iop-card h3 { margin:0 0 8px; font-size:1.1rem; color:#e2e8f0; }
.iop-card p { margin:0; color:#64748b; font-size:.85rem; }
.iop-stat { text-align:center; padding:20px; }
.iop-stat .val { font-size:2.2rem; font-weight:700; color:#60a5fa; }
.iop-stat .lbl { font-size:.75rem; color:#64748b; margin-top:4px; text-transform:uppercase; letter-spacing:.5px; }
.iop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
</style>
{% endblock %}
{% block content %}

<div class="iop-header">
  <h1>Info Ops Platform</h1>
  <p>Information operations analysis, monitoring, and reporting for strategic communications and influence assessment.</p>
  <div style="margin-top:20px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;">
    <a href="/info-ops/dashboard" class="iop-btn iop-btn-primary">Dashboard</a>
    <a href="/info-ops/analysis" class="iop-btn iop-btn-secondary">New Analysis</a>
    <a href="/info-ops/osint" class="iop-btn iop-btn-secondary">OSINT Browser</a>
    <a href="/info-ops/reports" class="iop-btn iop-btn-secondary">Reports</a>
  </div>
</div>

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

<!-- Stats -->
<div class="iop-grid" style="margin-bottom:28px;">
  <div class="iop-card iop-stat">
    <div class="val">12</div>
    <div class="lbl">Campaigns</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#22c55e;">4</div>
    <div class="lbl">Active Operations</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#f59e0b;">7</div>
    <div class="lbl">Pending Reports</div>
  </div>
  <div class="iop-card iop-stat">
    <div class="val" style="color:#a78bfa;">23</div>
    <div class="lbl">OSINT Feeds</div>
  </div>
</div>

<!-- Quick Actions -->
<div class="iop-grid" style="margin-bottom:28px;">
  <div class="iop-card">
    <h3>Dashboard</h3>
    <p>Real-time situational awareness with campaign tracking and sentiment analysis.</p>
    <a href="/info-ops/dashboard" class="iop-btn iop-btn-secondary" style="margin-top:14px;display:inline-block;">Open Dashboard</a>
  </div>
  <div class="iop-card">
    <h3>Analysis</h3>
    <p>Run narrative detection, sentiment analysis, and influence assessments.</p>
    <a href="/info-ops/analysis" class="iop-btn iop-btn-secondary" style="margin-top:14px;display:inline-block;">Start Analysis</a>
  </div>
  <div class="iop-card">
    <h3>OSINT</h3>
    <p>Browse and manage open-source intelligence feeds and data sources.</p>
    <a href="/info-ops/osint" class="iop-btn iop-btn-secondary" style="margin-top:14px;display:inline-block;">Browse OSINT</a>
  </div>
  <div class="iop-card">
    <h3>Reports</h3>
    <p>Generate, review, and export information operations reports.</p>
    <a href="/info-ops/reports" class="iop-btn iop-btn-secondary" style="margin-top:14px;display:inline-block;">View Reports</a>
  </div>
</div>

{% endblock %}