{% extends "base.html" %}
{% block title %}NOC — SLA Dashboard{% endblock %}
{% block extra_css %}
<style>
.nocc-header{background:linear-gradient(135deg,#0f172a,#0d1a2d);padding:22px 28px;border-radius:10px;margin-bottom:24px;border-left:4px solid #3b82f6;}
.sla-gauge{display:flex;align-items:center;gap:20px;}
.gauge-circle{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;border:5px solid;}
.gauge-green{border-color:#22c55e;color:#22c55e;background:rgba(34,197,94,.05);}
.gauge-yellow{border-color:#eab308;color:#eab308;background:rgba(234,179,8,.05);}
.gauge-red{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.05);}
.sla-table th{background:#0f172a;color:#94a3b8;font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;}
.sla-table td{padding:9px 12px;font-size:.83rem;border-bottom:1px solid #1e293b;vertical-align:middle;}
.sla-table tr:hover td{background:#1e293b;}
.breach-yes{color:#ef4444;font-weight:700;}.breach-no{color:#22c55e;}
.credit-badge{display:inline-block;padding:1px 7px;border-radius:8px;font-size:.7rem;background:#7f1d1d;color:#fca5a5;}
.bar-track{height:6px;border-radius:3px;background:#1e293b;overflow:hidden;margin-top:4px;}
.bar-fill{height:100%;border-radius:3px;}
</style>
{% endblock %}
{% block content %}
<div class="nocc-header">
  <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
    <div>
      <h2 style="margin:0;color:#7dd3fc;font-size:1.3rem;">SLA Dashboard</h2>
      <div style="color:#64748b;font-size:.85rem;margin-top:4px;">{{ classification }}</div>
    </div>
    <div class="sla-gauge">
      {% set pct = data.compliance_pct|default(100) %}
      <div class="gauge-circle {% if pct >= 99 %}gauge-green{% elif pct >= 95 %}gauge-yellow{% else %}gauge-red{% endif %}">
        {{ pct }}%
      </div>
      <div>
        <div style="color:#e2e8f0;font-weight:600;font-size:1rem;">SLA Compliance</div>
        <div style="color:#64748b;font-size:.8rem;">{{ data.total_circuits|default(0) }} circuits tracked</div>
        <div style="color:#ef4444;font-size:.8rem;margin-top:2px;">{{ data.breached_count|default(0) }} in breach</div>
      </div>
    </div>
  </div>
</div>

<h4 style="color:#94a3b8;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;">Breached Circuits</h4>
<div class="table-responsive">
  <table class="sla-table w-100">
    <thead>
      <tr><th>Circuit ID</th><th>Carrier</th><th>Customer</th><th>SLA Type</th><th>Target</th><th>Measured</th><th>Breach Minutes</th><th>Credit Eligible</th></tr>
    </thead>
    <tbody>
      {% for s in data.breached_circuits %}
      <tr>
        <td style="font-family:monospace;font-size:.78rem;color:#e2e8f0;">{{ s.circuit_id }}</td>
        <td style="color:#94a3b8;">{{ s.carrier }}</td>
        <td style="color:#64748b;">{{ s.customer or '—' }}</td>
        <td style="color:#7dd3fc;font-size:.78rem;">{{ s.sla_type }}</td>
        <td style="color:#e2e8f0;">{{ s.target_value }}{% if s.sla_type == 'uptime' %}%{% elif 'ms' in s.sla_type %} ms{% endif %}</td>
        <td>
          <span class="breach-yes">{{ s.measured_value|round(2) if s.measured_value is not none else '—' }}{% if s.sla_type == 'uptime' %}%{% elif 'ms' in s.sla_type %} ms{% endif %}</span>
          {% set target = s.target_value|float %}
          {% set measured = (s.measured_value or 0)|float %}
          {% if s.sla_type == 'uptime' %}
          <div class="bar-track"><div class="bar-fill" style="width:{{ [measured,100]|min }}%;background:{% if measured >= target %}#22c55e{% elif measured >= 95 %}#eab308{% else %}#ef4444{% endif %};"></div></div>
          {% endif %}
        </td>
        <td style="color:#f97316;font-weight:600;">{{ s.breach_minutes|default(0) }}</td>
        <td>{% if s.credit_eligible %}<span class="credit-badge">Credit Due</span>{% else %}<span style="color:#64748b;font-size:.75rem;">No</span>{% endif %}</td>
      </tr>
      {% else %}
      <tr><td colspan="8" style="text-align:center;color:#22c55e;padding:30px;">No SLA breaches — all circuits compliant</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% include 'includes/iqe_query_widget.html' %}
{% endblock %}
{% block extra_js %}
<script>
const IQE_CANVAS = "nocc";
const IQE_API = "/api/noc/iqe-query";
</script>
{% endblock %}