{% extends "security_canvas/base.html" %}
{% block title %}{{ pillar.name }} Pillar — NSA ZIG{% endblock %}
{% block head %}
<style>
.pillar-hero{background:linear-gradient(135deg,#0f0f1a,#1a1a2e);border-radius:12px;padding:28px;margin-bottom:24px;border-left:4px solid {{ pillar.color }};}
.pillar-hero h1{color:#fff;font-size:1.6rem;margin:0 0 6px;}
.pillar-hero .subtitle{color:#aaa;font-size:0.9rem;}
.cap-card{background:#1a1a2e;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid #2a2a4a;}
.cap-card.phase-discovery{border-left:3px solid #f59e0b;}
.cap-card.phase-phase1{border-left:3px solid #60a5fa;}
.cap-card.phase-phase2{border-left:3px solid #4ade80;}
.cap-status{display:inline-block;padding:3px 10px;border-radius:10px;font-size:0.75rem;font-weight:600;}
.status-not_started{background:#2a2a4a;color:#888;}
.status-planned{background:#1e3a5f;color:#60a5fa;}
.status-in_progress{background:#3a2a1e;color:#f59e0b;}
.status-implemented{background:#1e4a2a;color:#4ade80;}
.act-row{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #2a2a3a;}
.act-row:last-child{border-bottom:none;}
.act-check{width:20px;height:20px;border-radius:4px;border:2px solid #e94560;cursor:pointer;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;}
.act-check.complete{background:#e94560;border-color:#e94560;}
.act-check.in_progress{background:#f59e0b;border-color:#f59e0b;}
.act-body{flex:1;}
.act-title{color:#fff;font-size:0.85rem;font-weight:500;}
.act-desc{color:#888;font-size:0.75rem;margin-top:3px;}
.act-meta{font-size:0.7rem;color:#666;margin-top:4px;}
.phase-badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:0.7rem;margin-right:6px;}
.badge-discovery{background:#3a2e1e;color:#f59e0b;}
.badge-phase1{background:#1e2e3a;color:#60a5fa;}
.badge-phase2{background:#1e3a2e;color:#4ade80;}
</style>
{% endblock %}
{% block content %}
<div style="padding:24px;max-width:1200px;margin:0 auto;">

  <!-- Breadcrumb -->
  <div style="font-size:0.8rem;color:#666;margin-bottom:16px;">
    <a href="/security/zig/" style="color:#60a5fa;">ZIG Overview</a> &rsaquo; {{ pillar.name }} Pillar
  </div>

  <!-- Pillar Hero -->
  <div class="pillar-hero">
    <div style="float:right;text-align:right;">
      <div style="font-size:2rem;font-weight:700;color:{{ pillar.color }};">{{ (score.score * 100)|round(1) }}%</div>
      <span class="maturity-chip chip-{{ score.maturity_level }}">{{ score.maturity_level|title }}</span>
    </div>
    <h1>{{ pillar.name }} Pillar</h1>
    <div class="subtitle">{{ pillar.full_name }}</div>
    <div style="margin-top:10px;color:#aaa;font-size:0.85rem;">{{ pillar.description }}</div>
    <div style="margin-top:12px;font-size:0.8rem;color:#aaa;">
      {{ score.implemented_capabilities }}/{{ score.capability_count }} capabilities implemented &bull;
      {{ score.complete_activities }}/{{ score.activity_count }} activities complete
      {% if pillar.csi_url %}
      &bull; <a href="{{ pillar.csi_url }}" target="_blank" style="color:#60a5fa;">NSA CSI Guide &rarr;</a>
      {% endif %}
    </div>
  </div>

  <!-- Capabilities + Activities -->
  {% for cap in capabilities %}
  <div class="cap-card phase-{{ cap.phase }}">
    <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;">
      <div>
        <div style="color:#fff;font-weight:600;">{{ cap.title }}</div>
        <div style="font-size:0.75rem;color:#aaa;margin-top:4px;">
          <span class="phase-badge badge-{{ cap.phase }}">{{ cap.phase|replace('phase1','Phase 1')|replace('phase2','Phase 2')|title }}</span>
          <span class="maturity-chip chip-{{ cap.maturity_level }}" style="font-size:0.7rem;">{{ cap.maturity_level|title }}</span>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:8px;">
        <span class="cap-status status-{{ cap.implementation_status }}">{{ cap.implementation_status|replace('_',' ')|title }}</span>
        <select class="cap-status-sel" data-cap="{{ cap.id }}" style="background:#2a2a4a;border:1px solid #3a3a5a;color:#fff;border-radius:6px;padding:3px 8px;font-size:0.75rem;cursor:pointer;">
          <option value="not_started" {% if cap.implementation_status == 'not_started' %}selected{% endif %}>Not Started</option>
          <option value="planned" {% if cap.implementation_status == 'planned' %}selected{% endif %}>Planned</option>
          <option value="in_progress" {% if cap.implementation_status == 'in_progress' %}selected{% endif %}>In Progress</option>
          <option value="implemented" {% if cap.implementation_status == 'implemented' %}selected{% endif %}>Implemented</option>
        </select>
      </div>
    </div>
    <div style="font-size:0.8rem;color:#888;margin-bottom:12px;">{{ cap.description }}</div>

    <!-- Activities -->
    {% set cap_acts = activities_by_cap.get(cap.id, []) %}
    {% if cap_acts %}
    <div style="border-top:1px solid #2a2a4a;padding-top:10px;">
      <div style="font-size:0.75rem;color:#666;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em;">
        Activities ({{ cap.complete_activities }}/{{ cap.activity_count }} complete)
      </div>
      {% for act in cap_acts %}
      <div class="act-row">
        <div class="act-check {{ act.status }}" data-act="{{ act.id }}" title="Click to toggle status">
          {% if act.status == 'complete' %}&#x2713;{% elif act.status == 'in_progress' %}&#x25cf;{% endif %}
        </div>
        <div class="act-body">
          <div class="act-title">{{ act.title }}</div>
          {% if act.description %}<div class="act-desc">{{ act.description }}</div>{% endif %}
          <div class="act-meta">
            <span class="phase-badge badge-{{ act.phase }}">{{ act.phase|replace('phase1','Phase 1')|replace('phase2','Phase 2')|title }}</span>
            {% if act.nist_control_ref %}<span style="color:#666;">NIST {{ act.nist_control_ref }}</span>{% endif %}
            {% if act.evidence_note %}<span style="color:#f59e0b;margin-left:8px;">&#x1f4cb; {{ act.evidence_note[:60] }}...</span>{% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  {% endfor %}

  <div style="margin-top:24px;text-align:center;">
    <a href="/security/zig/" style="color:#60a5fa;">&larr; Back to ZIG Overview</a>
    &nbsp;&nbsp;
    <a href="/security/zig/phase" style="color:#60a5fa;">View Phase Tracker &rarr;</a>
  </div>
</div>

<script>
// Capability status update
document.querySelectorAll('.cap-status-sel').forEach(sel => {
  sel.addEventListener('change', async () => {
    const capId = sel.dataset.cap;
    const newStatus = sel.value;
    const resp = await fetch(`/security/api/zig/capabilities/${capId}`, {
      method: 'PATCH',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({implementation_status: newStatus})
    });
    if (resp.ok) location.reload();
  });
});

// Activity toggle (cycles: not_started → in_progress → complete → not_started)
const STATUS_CYCLE = {'not_started': 'in_progress', 'in_progress': 'complete', 'complete': 'not_started'};
document.querySelectorAll('.act-check').forEach(el => {
  el.addEventListener('click', async () => {
    const actId = el.dataset.act;
    const current = el.classList.contains('complete') ? 'complete' :
                    el.classList.contains('in_progress') ? 'in_progress' : 'not_started';
    const next = STATUS_CYCLE[current];
    const resp = await fetch(`/security/api/zig/activities/${actId}/complete`, {
      method: 'PATCH',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({status: next})
    });
    if (resp.ok) location.reload();
  });
});
</script>
{% endblock %}