{% extends "base.html" %}
{% block title %}SLOs — 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;}
.slo-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 90px;align-items:center;gap:10px;padding:9px 12px;border-radius:6px;background:#0f172a;margin-bottom:6px;font-size:.82rem;}
.slo-row-header{color:#64748b;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:4px 12px;margin-bottom:2px;}
.burn-bar{height:6px;border-radius:3px;background:#0f172a;overflow:hidden;}
.burn-fill{height:100%;border-radius:3px;}
.status-badge{padding:2px 9px;border-radius:12px;font-size:.7rem;font-weight:600;text-align:center;}
.badge-met{background:#065f46;color:#6ee7b7;}
.badge-at-risk{background:#451a03;color:#fbbf24;}
.badge-breached{background:#450a0a;color:#fca5a5;}
.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>📊 SLOs</h1>
  <p>Service Level Objectives · Burn Rates · Error Budgets</p>
</div>

{% set slos = data.slos %}
{% 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">{{ summary.get('total_slos', '—') }}</div>
    <div class="lbl">Total SLOs</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="color:#22c55e;">{{ summary.get('met_count', 0) }}</div>
    <div class="lbl">Met</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="color:#f59e0b;">{{ summary.get('at_risk_count', 0) }}</div>
    <div class="lbl">At Risk</div>
  </div></div>
  <div class="col-6 col-md-3"><div class="stat-card">
    <div class="val" style="color:{{ '#ef4444' if summary.get('breached_count',0) > 0 else '#22c55e' }}">
      {{ summary.get('breached_count', 0) }}</div>
    <div class="lbl">Breached</div>
  </div></div>
</div>

<!-- SLO Table -->
<div class="section-card">
  <h4>SLO Status</h4>
  <div class="slo-row slo-row-header">
    <span>SLO Name</span><span>Target</span><span>Current</span><span>Burn Rate</span><span>Status</span>
  </div>
  {% if slos %}
    {% for slo in slos %}
    {% set status = slo.get('status','unknown') %}
    {% set burn = slo.get('burn_rate', 0) %}
    {% set burn_pct = [burn * 10, 100]|min %}
    <div class="slo-row">
      <div>
        <div style="color:#e2e8f0;">{{ slo.get('name', slo.get('slo_name', '?')) }}</div>
        <div style="color:#64748b;font-size:.72rem;">{{ slo.get('service', '') }}</div>
      </div>
      <span style="color:#94a3b8;">{{ slo.get('target', slo.get('target_value', '?')) }}%</span>
      <span style="color:{{ '#22c55e' if status == 'met' else '#f59e0b' if status == 'at_risk' else '#ef4444' }}">
        {{ slo.get('current_value', '—') }}%</span>
      <div>
        <div style="font-size:.75rem;color:#94a3b8;margin-bottom:2px;">{{ burn|round(2) }}x</div>
        <div class="burn-bar" style="width:80px;">
          <div class="burn-fill" style="width:{{ burn_pct }}%;background:{{ '#ef4444' if burn > 5 else '#f59e0b' if burn > 1 else '#22c55e' }};"></div>
        </div>
      </div>
      <span class="status-badge badge-{{ status }}">{{ status|upper }}</span>
    </div>
    {% endfor %}
  {% else %}
    <p class="text-muted small mb-0">No SLOs configured.</p>
  {% endif %}
</div>

<!-- Error Budget Remaining -->
{% if slos %}
<div class="section-card">
  <h4>Error Budget Remaining</h4>
  <div class="row g-2">
    {% for slo in slos[:6] %}
    {% set budget = slo.get('error_budget_remaining', slo.get('budget_remaining', 100)) %}
    <div class="col-6 col-md-4">
      <div style="background:#0f172a;border-radius:8px;padding:12px 14px;">
        <div style="font-size:.78rem;color:#94a3b8;margin-bottom:6px;">{{ slo.get('name', slo.get('slo_name', '?')) }}</div>
        <div style="display:flex;align-items:center;gap:8px;">
          <div style="flex:1;height:8px;background:#1e293b;border-radius:4px;overflow:hidden;">
            <div style="width:{{ [budget,100]|min }}%;height:100%;border-radius:4px;background:{{ '#ef4444' if budget < 20 else '#f59e0b' if budget < 50 else '#22c55e' }};"></div>
          </div>
          <span style="font-size:.78rem;color:{{ '#ef4444' if budget < 20 else '#f59e0b' if budget < 50 else '#22c55e' }};">{{ budget|round(1) }}%</span>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

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