{% extends "base.html" %}
{% block title %}Incidents — Ops Hub{% endblock %}
{% block extra_css %}
<style>
.ohc-page-header{background:linear-gradient(135deg,#0f172a,#1e3a5f);padding:22px 28px;border-radius:10px;margin-bottom:24px;}
.ohc-page-header h1{margin:0;font-size:1.4rem;font-weight:700;color:#e0f2fe;}
.ohc-page-header p{margin:4px 0 0;color:#7dd3fc;font-size:.85rem;}
.stat-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;text-align:center;}
.stat-card .val{font-size:1.8rem;font-weight:700;color:#e0e7ff;}
.stat-card .lbl{font-size:.75rem;color:#64748b;margin-top:2px;}
.section-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:20px 24px;margin-bottom:16px;}
.section-card h4{margin:0 0 14px;font-size:.95rem;color:#e2e8f0;}
.incident-row{border-left:3px solid #334155;padding:10px 14px;margin-bottom:8px;background:#0f172a;border-radius:0 6px 6px 0;}
.incident-row.sev-critical{border-color:#ef4444;}
.incident-row.sev-high{border-color:#f97316;}
.incident-row.sev-medium{border-color:#f59e0b;}
.incident-row.sev-low{border-color:#22c55e;}
.sev-badge{padding:2px 8px;border-radius:12px;font-size:.7rem;font-weight:600;}
.sev-critical{background:#450a0a;color:#fca5a5;}
.sev-high{background:#431407;color:#fdba74;}
.sev-medium{background:#451a03;color:#fcd34d;}
.sev-low{background:#052e16;color:#86efac;}
.status-open{color:#ef4444;}
.status-investigating{color:#f59e0b;}
.status-resolved{color:#22c55e;}
.back-link{color:#7dd3fc;text-decoration:none;font-size:.85rem;}
</style>
{% endblock %}
{% block content %}
{% from "includes/classification_macros.html" import design_classification_banner %}
{{ design_classification_banner(classification) }}
<a class="back-link" href="/ops">← Ops Hub</a>
<div class="ohc-page-header mt-2">
  <h1>🚨 Incidents</h1>
  <p>Incident Command · MTTR · Severity Tracking</p>
</div>

{% set incidents = data.incidents %}
{% set summary = data.summary %}

<!-- Stats Row -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="color:{{ '#ef4444' if summary.get('open_count',0) > 0 else '#22c55e' }}">
      {{ summary.get('open_count', 0) }}</div>
    <div class="lbl">Open Incidents</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="color:#f59e0b;">{{ summary.get('investigating_count', 0) }}</div>
    <div class="lbl">Under Investigation</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val">{{ summary.get('resolved_24h', 0) }}</div>
    <div class="lbl">Resolved (24h)</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="font-size:1.3rem;">
      {% if summary.get('mttr_minutes') %}{{ summary.get('mttr_minutes')|round(0)|int }}m{% else %}—{% endif %}</div>
    <div class="lbl">Avg MTTR</div>
  </div></div>
</div>

<!-- Active Incidents -->
<div class="section-card">
  <h4>Active Incidents</h4>
  {% set active = incidents | selectattr('status', 'in', ['open','investigating']) | list if incidents else [] %}
  {% if active %}
    {% for inc in active %}
    {% set sev = inc.get('severity', 'medium') %}
    <div class="incident-row sev-{{ sev }}">
      <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:10px;">
        <div>
          <div style="color:#e2e8f0;font-weight:600;font-size:.88rem;">{{ inc.get('title', inc.get('incident_id','?')) }}</div>
          <div style="color:#64748b;font-size:.78rem;margin-top:2px;">{{ inc.get('summary', inc.get('description', '')) }}</div>
          <div style="margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;">
            <span style="color:#94a3b8;font-size:.72rem;">{{ inc.get('incident_id','') }}</span>
            {% if inc.get('service') %}<span style="color:#7dd3fc;font-size:.72rem;">{{ inc.service }}</span>{% endif %}
            {% if inc.get('created_at') %}<span style="color:#64748b;font-size:.72rem;">{{ inc.created_at }}</span>{% endif %}
          </div>
        </div>
        <div style="text-align:right;flex-shrink:0;">
          <div><span class="sev-badge sev-{{ sev }}">{{ sev|upper }}</span></div>
          <div class="status-{{ inc.get('status','open') }} mt-1" style="font-size:.78rem;font-weight:600;">{{ inc.get('status','?')|upper }}</div>
        </div>
      </div>
    </div>
    {% endfor %}
  {% else %}
    <div style="padding:20px;text-align:center;">
      <div style="font-size:1.5rem;margin-bottom:6px;">✅</div>
      <p class="text-muted small mb-0">No active incidents.</p>
    </div>
  {% endif %}
</div>

<!-- Recent Resolved -->
{% set resolved = incidents | selectattr('status', 'equalto', 'resolved') | list if incidents else [] %}
{% if resolved %}
<div class="section-card">
  <h4>Recently Resolved</h4>
  {% for inc in resolved[:5] %}
  {% set sev = inc.get('severity', 'low') %}
  <div class="incident-row sev-{{ sev }}" style="opacity:.7;">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;">
      <div>
        <div style="color:#94a3b8;font-size:.85rem;">{{ inc.get('title', inc.get('incident_id','?')) }}</div>
        {% if inc.get('duration_minutes') %}
        <div style="color:#64748b;font-size:.75rem;">MTTR: {{ inc.duration_minutes|round(0)|int }}m</div>
        {% endif %}
      </div>
      <span class="sev-badge sev-{{ sev }}">{{ sev|upper }}</span>
    </div>
  </div>
  {% endfor %}
  <a href="/api/ops/incidents" class="small text-muted mt-2 d-block">View full JSON →</a>
</div>
{% endif %}

{% include "includes/iqe_query_widget.html" %}
{% endblock %}