{% extends "base.html" %}
{% block title %}Info Ops Settings — 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; margin-bottom:20px; }
.iop-card h3 { margin:0 0 12px; 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-input { width:100%; background:#0f172a; border:1px solid #334155; border-radius:6px; padding:8px 12px; color:#e2e8f0; font-size:.85rem; }
.iop-input:focus { outline:none; border-color:#2563eb; }
.iop-checkbox { width:18px; height:18px; accent-color:#2563eb; }
.iop-label { display:block; color:#94a3b8; font-size:.8rem; margin-bottom:6px; }
.iop-row { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.iop-col { flex:1; min-width:260px; }
</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>Platform Settings</h1>
      <p style="color:#94a3b8;margin:6px 0 0;">Configure Info Ops Platform behavior and integrations</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/" class="iop-btn iop-btn-secondary">Home</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> / Settings
</div>

<div class="iop-card">
  <h3>General</h3>
  <div class="iop-row">
    <div class="iop-col">
      <label class="iop-label">Platform Name</label>
      <input type="text" class="iop-input" value="Info Ops Platform" id="settingName">
    </div>
    <div class="iop-col">
      <label class="iop-label">Default Classification</label>
      <select class="iop-input" id="settingClassification">
        <option selected>CUI // SP-CTI</option>
        <option>CUI</option>
        <option>SECRET</option>
        <option>UNCLASSIFIED</option>
      </select>
    </div>
  </div>
  <div class="iop-row">
    <div class="iop-col">
      <label class="iop-label">Notification Email</label>
      <input type="email" class="iop-input" value="iop@icdev.local" id="settingEmail">
    </div>
    <div class="iop-col">
      <label class="iop-label">Polling Interval (seconds)</label>
      <input type="number" class="iop-input" value="30" min="5" max="300" id="settingPoll">
    </div>
  </div>
</div>

<div class="iop-card">
  <h3>Integrations</h3>
  <div style="margin-bottom:12px;">
    <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;font-size:.9rem;cursor:pointer;">
      <input type="checkbox" class="iop-checkbox" checked id="enableOsint">
      Enable OSINT Feed Collection
    </label>
  </div>
  <div style="margin-bottom:12px;">
    <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;font-size:.9rem;cursor:pointer;">
      <input type="checkbox" class="iop-checkbox" checked id="enableAlerts">
      Enable Real-time Alerts
    </label>
  </div>
  <div style="margin-bottom:12px;">
    <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;font-size:.9rem;cursor:pointer;">
      <input type="checkbox" class="iop-checkbox" id="enableAutoReport">
      Auto-generate Weekly Reports
    </label>
  </div>
  <div style="margin-bottom:12px;">
    <label style="display:flex;align-items:center;gap:8px;color:#e2e8f0;font-size:.9rem;cursor:pointer;">
      <input type="checkbox" class="iop-checkbox" checked id="enableDarkMode">
      Default to Dark Mode
    </label>
  </div>
</div>

<div class="iop-card">
  <h3>Data Retention</h3>
  <div class="iop-row">
    <div class="iop-col">
      <label class="iop-label">Report Retention (days)</label>
      <input type="number" class="iop-input" value="90" min="7" max="365" id="settingRetention">
    </div>
    <div class="iop-col">
      <label class="iop-label">OSINT Log Retention (days)</label>
      <input type="number" class="iop-input" value="30" min="7" max="90" id="settingOsintRetention">
    </div>
  </div>
</div>

<div style="display:flex;justify-content:flex-end;gap:10px;">
  <button class="iop-btn iop-btn-secondary" onclick="resetSettings()">Reset Defaults</button>
  <button class="iop-btn iop-btn-primary" onclick="saveSettings()">Save Settings</button>
</div>

<script>
function saveSettings() {
  var settings = {
    name: document.getElementById('settingName').value,
    classification: document.getElementById('settingClassification').value,
    email: document.getElementById('settingEmail').value,
    pollInterval: parseInt(document.getElementById('settingPoll').value),
    enableOsint: document.getElementById('enableOsint').checked,
    enableAlerts: document.getElementById('enableAlerts').checked,
    enableAutoReport: document.getElementById('enableAutoReport').checked,
    enableDarkMode: document.getElementById('enableDarkMode').checked,
    reportRetention: parseInt(document.getElementById('settingRetention').value),
    osintRetention: parseInt(document.getElementById('settingOsintRetention').value),
  };
  console.log('Settings saved:', settings);
  alert('Settings saved successfully.');
}
function resetSettings() {
  document.getElementById('settingName').value = 'Info Ops Platform';
  document.getElementById('settingClassification').value = 'CUI // SP-CTI';
  document.getElementById('settingEmail').value = 'iop@icdev.local';
  document.getElementById('settingPoll').value = '30';
  document.getElementById('enableOsint').checked = true;
  document.getElementById('enableAlerts').checked = true;
  document.getElementById('enableAutoReport').checked = false;
  document.getElementById('enableDarkMode').checked = true;
  document.getElementById('settingRetention').value = '90';
  document.getElementById('settingOsintRetention').value = '30';
  alert('Settings reset to defaults.');
}
</script>

{% endblock %}