{% extends "base.html" %}
{% block title %}NOC — MOPs{% endblock %}
{% block extra_css %}
<style>
.nocc-header{background:linear-gradient(135deg,#0f172a,#0d1f0d);padding:22px 28px;border-radius:10px;margin-bottom:24px;border-left:4px solid #22c55e;}
.mop-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px 22px;margin-bottom:12px;cursor:pointer;transition:border-color .15s;}
.mop-card:hover{border-color:#22c55e;}
.mop-card.expanded{border-color:#22c55e;}
.step-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #1e293b;font-size:.83rem;}
.step-row:last-child{border-bottom:none;}
.step-num{min-width:28px;height:28px;border-radius:50%;background:#0f172a;border:1px solid #22c55e;color:#22c55e;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0;}
.step-content{flex:1;}
.step-action{color:#e2e8f0;font-weight:500;}
.step-meta{display:flex;gap:16px;margin-top:4px;font-size:.75rem;color:#64748b;}
.gen-badge{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.68rem;border:1px solid;}
.gen-ai{border-color:#22c55e;color:#22c55e;}.gen-manual{border-color:#64748b;color:#64748b;}
</style>
{% endblock %}
{% block content %}
<div class="nocc-header">
  <h2 style="margin:0;color:#86efac;font-size:1.3rem;">Methods of Procedure (MOPs)</h2>
  <div style="color:#64748b;font-size:.85rem;margin-top:4px;">{{ classification }}</div>
</div>

{% for m in mops %}
<div class="mop-card" onclick="toggleMop('{{ m.id }}')">
  <div class="d-flex justify-content-between align-items-center">
    <div>
      <span style="font-family:monospace;font-size:.75rem;color:#64748b;">{{ m.mop_number }}</span>
      <h4 style="margin:4px 0 0;color:#e2e8f0;font-size:.95rem;">{{ m.title }}</h4>
      {% if m.rfc_id %}<div style="font-size:.75rem;color:#64748b;">RFC: {{ m.rfc_id[:8] }}...</div>{% endif %}
    </div>
    <div class="d-flex align-items-center gap-2">
      <span class="gen-badge gen-{{ 'ai' if m.generated_by != 'manual' else 'manual' }}">{{ m.generated_by }}</span>
      <span style="color:#64748b;font-size:.75rem;">{{ m.created_at | ts }}</span>
    </div>
  </div>
  <div id="mop-steps-{{ m.id }}" style="display:none;margin-top:14px;">
    {% set steps = m.steps_json %}
    <div id="steps-container-{{ m.id }}"></div>
  </div>
</div>
{% else %}
<div style="text-align:center;color:#64748b;padding:48px 0;">
  No MOPs yet. Generate one from an RFC on the <a href="/noc/rfcs" style="color:#22c55e;">RFCs page</a>.
</div>
{% endfor %}

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

function toggleMop(id) {
  const el = document.getElementById(`mop-steps-${id}`);
  if (!el) return;
  const visible = el.style.display !== 'none';
  el.style.display = visible ? 'none' : 'block';
  if (!visible) renderSteps(id);
}

function renderSteps(id) {
  const mop = mopData.find(m => m.id === id);
  if (!mop) return;
  let steps = mop.steps_json;
  if (typeof steps === 'string') { try { steps = JSON.parse(steps); } catch(e) { steps = []; } }
  const container = document.getElementById(`steps-container-${id}`);
  container.innerHTML = (steps || []).map(s => `
    <div class="step-row">
      <div class="step-num">${s.step}</div>
      <div class="step-content">
        <div class="step-action">${s.action || ''}</div>
        <div class="step-meta">
          <span>Timeout: ${s.timeout_min || '?'} min</span>
          <span>Rollback: ${s.rollback || 'N/A'}</span>
        </div>
        <div style="font-size:.75rem;color:#64748b;margin-top:2px;">Verify: ${s.verification || ''}</div>
      </div>
    </div>
  `).join('') || '<div style="color:#64748b;font-size:.83rem;padding:10px 0;">No steps defined</div>';
}
</script>
{% endblock %}