{% extends "base.html" %}
{% block title %}DWDM Spans — CCC{% endblock %}
{% block content %}
<div class="container-fluid px-4 py-3">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h5 class="mb-0" style="color:#38bdf8;"><i class="bi bi-broadcast me-2"></i>DWDM Spans</h5>
    <a href="/ccc" class="btn btn-sm btn-outline-secondary">← Overview</a>
  </div>
  <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;">
    <a href="/ccc" class="btn btn-sm btn-outline-secondary">Overview</a>
    <a href="/ccc/circuits" class="btn btn-sm btn-outline-secondary">Circuits</a>
    <a href="/ccc/cross-connects" class="btn btn-sm btn-outline-secondary">Cross-Connects</a>
    <a href="/ccc/loa" class="btn btn-sm btn-outline-secondary">LOA</a>
    <a href="/ccc/orders" class="btn btn-sm btn-outline-secondary">Orders</a>
    <a href="/ccc/capacity" class="btn btn-sm btn-outline-secondary">Capacity</a>
    <a href="/ccc/dwdm" class="btn btn-sm btn-outline-info active">DWDM</a>
  </div>

  <!-- Add DWDM span -->
  <div class="card bg-dark border-secondary mb-4">
    <div class="card-header border-secondary">Add DWDM Span</div>
    <div class="card-body">
      <div class="row g-2">
        <div class="col-md-2"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-span-id" placeholder="Span ID *"></div>
        <div class="col-md-3"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-fiber-route" placeholder="Fiber Route (e.g. NYC–CHI)"></div>
        <div class="col-md-1"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-total-cap" placeholder="Total Tbps" type="number" step="0.1"></div>
        <div class="col-md-1"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-used-cap" placeholder="Used Tbps" type="number" step="0.1"></div>
        <div class="col-md-1"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-waves" placeholder="Avail λ" type="number"></div>
        <div class="col-md-1"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-osnr" placeholder="OSNR dB" type="number" step="0.1"></div>
        <div class="col-md-1">
          <select class="form-select form-select-sm bg-dark text-light border-secondary" id="f-dwdm-status">
            <option>operational</option><option>degraded</option><option>dark</option><option>maintenance</option>
          </select>
        </div>
        <div class="col-md-1"><input class="form-control form-control-sm bg-dark text-light border-secondary" id="f-amps" placeholder="Amps" type="number"></div>
        <div class="col-md-1"><button class="btn btn-sm btn-info w-100" onclick="addSpan()">Add</button></div>
      </div>
      <div id="span-msg" class="mt-2 small"></div>
    </div>
  </div>

  <div class="card bg-dark border-secondary">
    <div class="card-body p-0">
      <table class="table table-dark table-sm mb-0">
        <thead>
          <tr><th>Span ID</th><th>Route</th><th>Total Tbps</th><th>Used Tbps</th><th>Util%</th><th>Avail λ</th><th>OSNR (dB)</th><th>Amplifiers</th><th>Status</th></tr>
        </thead>
        <tbody>
          {% for s in spans %}
          {% set total = s.total_capacity_tbps | float %}
          {% set used = s.used_capacity_tbps | float %}
          {% set util = ((used / total * 100) | round(1)) if total > 0 else 0 %}
          <tr>
            <td class="text-info fw-bold">{{ s.span_id }}</td>
            <td>{{ s.fiber_route or '—' }}</td>
            <td>{{ total }}</td>
            <td>{{ used }}</td>
            <td>
              <span class="{% if util >= 85 %}text-danger{% elif util >= 70 %}text-warning{% else %}text-success{% endif %} fw-bold">
                {{ util }}%
              </span>
            </td>
            <td>{{ s.available_wavelengths }}</td>
            <td>
              {% set osnr = s.osnr_db | float %}
              <span class="{% if osnr > 0 and osnr < 15 %}text-danger{% elif osnr > 0 and osnr < 20 %}text-warning{% else %}text-success{% endif %}">
                {{ osnr if osnr > 0 else '—' }}
              </span>
            </td>
            <td>{{ s.amplifier_count }}</td>
            <td>
              {% set st = s.status %}
              <span style="display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;"
                class="badge-{{ st }}">{{ st }}</span>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="9" class="text-center text-muted py-4">No DWDM spans yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% include 'includes/iqe_query_widget.html' %}
</div>
<script>
const IQE_CANVAS = 'ccc'; const IQE_COLLECTION = 'ccc.dwdm_spans';
function addSpan() {
  const data = {
    span_id: document.getElementById('f-span-id').value,
    fiber_route: document.getElementById('f-fiber-route').value,
    total_capacity_tbps: parseFloat(document.getElementById('f-total-cap').value) || 0,
    used_capacity_tbps: parseFloat(document.getElementById('f-used-cap').value) || 0,
    available_wavelengths: parseInt(document.getElementById('f-waves').value) || 0,
    osnr_db: parseFloat(document.getElementById('f-osnr').value) || 0,
    amplifier_count: parseInt(document.getElementById('f-amps').value) || 0,
    status: document.getElementById('f-dwdm-status').value,
  };
  const msg = document.getElementById('span-msg');
  fetch('/api/ccc/dwdm', {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)})
    .then(r=>r.json())
    .then(d=>{ msg.innerHTML = d.status==='created' ? '<span class="text-success">Added.</span>' : '<span class="text-danger">'+(d.error||'Error')+'</span>'; })
    .catch(e=>{ msg.innerHTML='<span class="text-danger">'+e+'</span>'; });
}
</script>
{% endblock %}