{% extends "base.html" %}
{% block title %}NOC Operations — Overview{% endblock %}
{% block extra_css %}
<style>
.nocc-header{background:linear-gradient(135deg,#0f172a 0%,#1c2a3a 40%,#0c1a0c 100%);padding:28px 32px 24px;border-radius:12px;margin-bottom:28px;border-left:4px solid #f97316;}
.nocc-header h1{margin:0;font-size:1.6rem;font-weight:700;color:#fed7aa;letter-spacing:.3px;}
.nocc-header p{margin:6px 0 0;color:#fb923c;font-size:.9rem;}
.sev-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:700;}
.sev-critical{background:#7f1d1d;color:#fca5a5;}
.sev-major{background:#7c2d12;color:#fdba74;}
.sev-minor{background:#713f12;color:#fde68a;}
.sev-warning{background:#1e3a5f;color:#7dd3fc;}
.sev-info{background:#1e293b;color:#94a3b8;}
.metric-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;text-align:center;}
.metric-card .val{font-size:2rem;font-weight:700;line-height:1.1;}
.metric-card .lbl{font-size:.78rem;color:#64748b;margin-top:4px;}
.alarm-ring{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0;}
.ring-item{background:#0f172a;border-radius:8px;padding:10px;text-align:center;border:1px solid #1e293b;}
.p1{color:#ef4444;}.p2{color:#f97316;}.p3{color:#eab308;}.p4{color:#3b82f6;}
.nav-btn{padding:7px 16px;border-radius:8px;font-size:.82rem;font-weight:600;text-decoration:none;background:#0f172a;border:1px solid #334155;color:#94a3b8;}
.nav-btn:hover{border-color:#f97316;color:#f97316;}
.section-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;margin-bottom:16px;}
.section-card h3{margin:0 0 12px;font-size:.95rem;color:#e2e8f0;}
.mw-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #1e293b;font-size:.85rem;}
.mw-row:last-child{border-bottom:none;}
</style>
{% endblock %}
{% block content %}
<div class="nocc-header">
  <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
    <div>
      <h1>NOC Operations Center</h1>
      <p>Carrier-grade alarm &middot; incident &middot; SLA management — {{ classification }}</p>
    </div>
    {% if overview.open_p1_count > 0 %}
    <div style="background:#7f1d1d;padding:8px 16px;border-radius:8px;color:#fca5a5;font-weight:700;font-size:.9rem;">
      {{ overview.open_p1_count }} OPEN P1
    </div>
    {% endif %}
  </div>
  <div class="d-flex flex-wrap gap-2 mt-3">
    <a class="nav-btn" href="/noc/alarms">Alarms</a>
    <a class="nav-btn" href="/noc/incidents">Incidents</a>
    <a class="nav-btn" href="/noc/rfcs">RFCs</a>
    <a class="nav-btn" href="/noc/mops">MOPs</a>
    <a class="nav-btn" href="/noc/maintenance">Maintenance</a>
    <a class="nav-btn" href="/noc/sla">SLA</a>
  </div>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="val p1">{{ overview.alarm_summary.critical|default(0) }}</div>
      <div class="lbl">Critical Alarms</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="val p2">{{ overview.alarm_summary.major|default(0) }}</div>
      <div class="lbl">Major Alarms</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      <div class="val p1">{{ overview.incident_counts.p1|default(0) }}</div>
      <div class="lbl">Open P1 Incidents</div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="metric-card">
      {% set sla_pct = overview.sla_health.compliance_pct|default(100) %}
      <div class="val" style="color:{% if sla_pct >= 99 %}#22c55e{% elif sla_pct >= 95 %}#eab308{% else %}#ef4444{% endif %};">{{ sla_pct }}%</div>
      <div class="lbl">SLA Compliance</div>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-6">
    <div class="section-card">
      <h3>Alarm Summary</h3>
      <div class="alarm-ring">
        {% for sev in ['critical','major','minor','warning','info'] %}
        <div class="ring-item">
          <div style="font-size:1.3rem;font-weight:700;color:{% if sev=='critical' %}#ef4444{% elif sev=='major' %}#f97316{% elif sev=='minor' %}#eab308{% elif sev=='warning' %}#3b82f6{% else %}#64748b{% endif %};">
            {{ overview.alarm_summary[sev]|default(0) }}
          </div>
          <div style="font-size:.7rem;color:#64748b;text-transform:capitalize;">{{ sev }}</div>
        </div>
        {% endfor %}
      </div>
      <a href="/noc/alarms" style="font-size:.8rem;color:#f97316;text-decoration:none;">View all alarms &rarr;</a>
    </div>
  </div>
  <div class="col-md-6">
    <div class="section-card">
      <h3>Upcoming Maintenance (next 3 days)</h3>
      {% if overview.upcoming_maintenance %}
        {% for w in overview.upcoming_maintenance %}
        <div class="mw-row">
          <div>
            <div style="color:#e2e8f0;font-weight:600;">{{ w.title }}</div>
            <div style="color:#64748b;font-size:.75rem;">{{ w.window_number }} &middot; {{ w.impact_scope }}</div>
          </div>
          <div style="text-align:right;font-size:.78rem;color:#94a3b8;">{{ w.scheduled_start | ts }}</div>
        </div>
        {% endfor %}
      {% else %}
        <div style="color:#64748b;font-size:.85rem;text-align:center;padding:20px 0;">No upcoming maintenance windows</div>
      {% endif %}
      <a href="/noc/maintenance" style="font-size:.8rem;color:#f97316;text-decoration:none;">View all &rarr;</a>
    </div>
  </div>
</div>

{% include 'includes/iqe_query_widget.html' %}
{% endblock %}
{% block extra_js %}
<script>
const IQE_CANVAS = "nocc";
const IQE_API = "/api/noc/iqe-query";
const IQE_EXAMPLES = [
  "Show active critical alarms",
  "List open P1 incidents",
  "What circuits have SLA breaches this month?",
  "Show pending RFCs",
  "What maintenance windows are scheduled this week?"
];
// Auto-refresh alarm counts every 60s
setTimeout(() => location.reload(), 60000);
</script>
{% endblock %}