{% extends "security_canvas/base.html" %}
{% block title %}NSA ZIG Dashboard — Security Canvas{% endblock %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
.zig-hero{background:linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 50%,#16213e 100%);border-radius:12px;padding:32px;margin-bottom:24px;border:1px solid #e94560;}
.zig-hero h1{font-size:1.8rem;color:#fff;margin:0 0 8px;}
.zig-hero .subtitle{color:#aaa;font-size:0.9rem;}
.zig-score-badge{display:inline-block;background:#e94560;color:#fff;border-radius:50%;width:80px;height:80px;line-height:80px;text-align:center;font-size:1.4rem;font-weight:700;float:right;}
.zig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:24px;}
.zig-card{background:#1a1a2e;border-radius:10px;padding:20px;border:1px solid #2a2a4a;transition:border-color .2s;}
.zig-card:hover{border-color:#e94560;}
.zig-card h3{margin:0 0 12px;font-size:1rem;color:#fff;}
.pillar-bar{height:8px;border-radius:4px;background:#2a2a4a;margin:8px 0;}
.pillar-bar-fill{height:100%;border-radius:4px;transition:width .5s;}
.maturity-chip{display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.75rem;font-weight:600;text-transform:uppercase;}
.chip-preparation{background:#3a3a5a;color:#aaa;}
.chip-basic{background:#1e3a5f;color:#60a5fa;}
.chip-intermediate{background:#1e4a2a;color:#4ade80;}
.chip-advanced{background:#4a1e2a;color:#f472b6;}
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
.phase-box{background:#1a1a2e;border-radius:8px;padding:16px;border:1px solid #2a2a4a;text-align:center;}
.phase-box h4{margin:0 0 8px;font-size:0.85rem;color:#aaa;text-transform:uppercase;letter-spacing:.05em;}
.phase-pct{font-size:1.8rem;font-weight:700;color:#e94560;}
.fy-bar-container{background:#1a1a2e;border-radius:10px;padding:20px;border:1px solid #2a2a4a;margin-bottom:24px;}
.fy-bar-track{height:24px;background:#2a2a4a;border-radius:12px;overflow:hidden;position:relative;}
.fy-bar-fill{height:100%;background:linear-gradient(90deg,#e94560,#f59e0b);border-radius:12px;transition:width .8s;}
.fy-bar-label{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:0.8rem;color:#fff;font-weight:600;}
.radar-container{background:#1a1a2e;border-radius:10px;padding:20px;border:1px solid #2a2a4a;margin-bottom:24px;}
</style>
{% endblock %}
{% block content %}
<div style="padding:24px;max-width:1400px;margin:0 auto;">

  <!-- Hero Banner -->
  <div class="zig-hero">
    <div class="zig-score-badge">{{ (aggregate.score * 100)|round(0)|int }}%</div>
    <h1>NSA Zero Trust Implementation Guide</h1>
    <div class="subtitle">
      7 Pillars &bull; 42 Target Capabilities &bull; 91 Activities &bull; FY2027 Target Deadline
    </div>
    <div style="margin-top:12px;">
      <span class="maturity-chip chip-{{ aggregate.maturity_level }}">{{ aggregate.maturity_level|title }}</span>
      &nbsp;
      <a href="/security/zig/assessment" style="color:#e94560;font-size:0.85rem;">Run Assessment &rarr;</a>
      &nbsp;&nbsp;
      <a href="/security/zig/roadmap" style="color:#60a5fa;font-size:0.85rem;">View Roadmap &rarr;</a>
    </div>
  </div>

  <!-- FY2027 Readiness Bar -->
  <div class="fy-bar-container">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <h3 style="margin:0;color:#fff;font-size:1rem;">FY2027 Target Readiness</h3>
      <span style="color:#aaa;font-size:0.85rem;">{{ fy2027.complete_activities }} / {{ fy2027.fy2027_target_activities }} activities complete</span>
    </div>
    <div class="fy-bar-track">
      <div class="fy-bar-fill" style="width:{{ fy2027.pct_complete }}%;"></div>
      <span class="fy-bar-label">{{ fy2027.pct_complete }}%</span>
    </div>
    <div style="margin-top:8px;font-size:0.8rem;color:#aaa;">
      Deadline: September 30, 2027 &bull; Advanced Level: September 30, 2032
    </div>
  </div>

  <!-- Phase Progress -->
  <div class="phase-grid">
    {% for phase in phases %}
    <div class="phase-box">
      <h4>{{ phase.label }}</h4>
      <div class="phase-pct">{{ phase.pct_complete }}%</div>
      <div style="font-size:0.8rem;color:#aaa;margin-top:4px;">
        {{ phase.complete }}/{{ phase.total }} activities
      </div>
      <div class="pillar-bar" style="margin-top:12px;">
        <div class="pillar-bar-fill" style="width:{{ phase.pct_complete }}%;background:#e94560;"></div>
      </div>
      <a href="/security/zig/phase" style="font-size:0.8rem;color:#60a5fa;">View activities &rarr;</a>
    </div>
    {% endfor %}
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;">
    <!-- Radar Chart -->
    <div class="radar-container">
      <h3 style="margin:0 0 16px;color:#fff;font-size:1rem;">7-Pillar Maturity Radar</h3>
      <canvas id="zigRadar" height="300"></canvas>
    </div>

    <!-- Pillar Score List -->
    <div>
      <h3 style="color:#fff;margin-bottom:16px;font-size:1rem;">Pillar Maturity Scores</h3>
      {% for ps in pillar_scores %}
      <a href="/security/zig/pillar/{{ ps.slug }}" style="text-decoration:none;">
        <div class="zig-card" style="margin-bottom:12px;padding:14px;">
          <div style="display:flex;justify-content:space-between;align-items:center;">
            <div>
              <div style="color:#fff;font-size:0.9rem;font-weight:600;">{{ ps.name }}</div>
              <div style="color:#aaa;font-size:0.75rem;">{{ ps.full_name }}</div>
            </div>
            <div style="text-align:right;">
              <div style="color:{{ ps.color }};font-size:1.1rem;font-weight:700;">{{ (ps.score * 100)|round(1) }}%</div>
              <span class="maturity-chip chip-{{ ps.maturity_level }}">{{ ps.maturity_level|title }}</span>
            </div>
          </div>
          <div class="pillar-bar">
            <div class="pillar-bar-fill" style="width:{{ (ps.score * 100)|round(0)|int }}%;background:{{ ps.color }};"></div>
          </div>
          <div style="font-size:0.75rem;color:#aaa;">
            {{ ps.implemented_capabilities }}/{{ ps.capability_count }} capabilities &bull;
            {{ ps.complete_activities }}/{{ ps.activity_count }} activities
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>

  <!-- IQE Query Widget -->
  {% set iqe_canvas = "security_zig" %}
  {% include "includes/iqe_query_widget.html" ignore missing %}

</div>

<script>
const zigLabels = {{ pillar_scores|map(attribute='name')|list|tojson }};
const zigScores = {{ pillar_scores|map(attribute='score')|list|tojson }};
const zigColors = {{ pillar_scores|map(attribute='color')|list|tojson }};

const ctx = document.getElementById('zigRadar').getContext('2d');
new Chart(ctx, {
  type: 'radar',
  data: {
    labels: zigLabels,
    datasets: [{
      label: 'Maturity Score',
      data: zigScores.map(s => Math.round(s * 100)),
      backgroundColor: 'rgba(233,69,96,0.15)',
      borderColor: '#e94560',
      pointBackgroundColor: zigColors,
      pointBorderColor: '#fff',
      pointRadius: 5,
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { labels: { color: '#aaa' } } },
    scales: {
      r: {
        min: 0, max: 100,
        ticks: { color: '#aaa', backdropColor: 'transparent', stepSize: 25 },
        grid: { color: '#2a2a4a' },
        angleLines: { color: '#2a2a4a' },
        pointLabels: { color: '#fff', font: { size: 12 } }
      }
    }
  }
});
</script>
{% endblock %}