{% extends "security_canvas/base.html" %}
{% block title %}ZIG External Portfolio — Security Canvas{% endblock %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
/* ── Layout ── */
.ext-page{padding:24px;max-width:1400px;margin:0 auto;}
.ext-hero{background:linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 50%,#16213e 100%);border-radius:12px;padding:28px 32px;margin-bottom:24px;border:1px solid #2a2a4a;}
.ext-hero h1{font-size:1.6rem;color:#fff;margin:0 0 6px;}
.ext-hero .subtitle{color:#aaa;font-size:0.85rem;}
/* ── Health Bar ── */
.health-bar-panel{background:#1a1a2e;border-radius:10px;border:1px solid #2a2a4a;padding:24px;margin-bottom:24px;}
.health-bar-panel h2{color:#fff;font-size:1rem;margin:0 0 20px;font-weight:600;}
.health-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:20px;}
.health-kpi{text-align:center;padding:16px;background:#0f0f1a;border-radius:8px;border:1px solid #2a2a4a;}
.health-kpi .kpi-val{font-size:2rem;font-weight:700;color:#e94560;line-height:1;}
.health-kpi .kpi-lbl{font-size:0.75rem;color:#aaa;margin-top:4px;text-transform:uppercase;letter-spacing:.05em;}
.maturity-dist-row{display:flex;gap:8px;flex-wrap:wrap;}
.maturity-dist-bar{flex:1;min-width:80px;}
.maturity-dist-bar .dist-label{font-size:0.7rem;color:#aaa;text-transform:uppercase;margin-bottom:4px;white-space:nowrap;}
.maturity-dist-bar .dist-track{height:8px;background:#2a2a4a;border-radius:4px;overflow:hidden;}
.maturity-dist-bar .dist-fill{height:100%;border-radius:4px;transition:width .6s;}
.maturity-dist-bar .dist-count{font-size:0.75rem;color:#fff;margin-top:3px;text-align:right;}
/* ── Attention Cards ── */
.attention-panel{margin-bottom:24px;}
.attention-panel h2{color:#fff;font-size:1rem;font-weight:600;margin:0 0 16px;}
.attention-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.attention-card{background:#1a1a2e;border-radius:10px;padding:18px;border:1px solid #4a1e1e;position:relative;overflow:hidden;}
.attention-card::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:#ef4444;}
.attention-card h3{margin:0 0 8px;color:#fff;font-size:0.95rem;font-weight:600;}
.attention-card .attn-score{color:#ef4444;font-size:1.4rem;font-weight:700;}
.attention-card .attn-meta{font-size:0.75rem;color:#aaa;margin-top:6px;}
.attention-card .gap-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.gap-pill{background:#2a1a1a;color:#f87171;font-size:0.7rem;padding:2px 8px;border-radius:10px;border:1px solid #4a2a2a;}
.attention-empty{background:#1a1a2e;border-radius:10px;padding:24px;text-align:center;color:#4ade80;border:1px solid #1e4a2a;}
/* ── Radar Panel ── */
.radar-panel{background:#1a1a2e;border-radius:10px;border:1px solid #2a2a4a;padding:24px;margin-bottom:24px;}
.radar-panel h2{color:#fff;font-size:1rem;font-weight:600;margin:0 0 16px;}
.radar-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.radar-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;background:#0f0f1a;border-radius:6px;padding:6px 12px;border:1px solid #2a2a4a;transition:border-color .2s;user-select:none;}
.radar-toggle:hover{border-color:#e94560;}
.radar-toggle input[type=checkbox]{accent-color:#e94560;width:14px;height:14px;}
.radar-toggle .tog-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.radar-toggle .tog-name{font-size:0.8rem;color:#fff;}
.radar-canvas-wrap{max-width:540px;margin:0 auto;}
/* ── Sortable Table ── */
.table-panel{background:#1a1a2e;border-radius:10px;border:1px solid #2a2a4a;padding:24px;margin-bottom:24px;}
.table-panel h2{color:#fff;font-size:1rem;font-weight:600;margin:0 0 16px;}
.tbl-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.tbl-search{background:#0f0f1a;border:1px solid #2a2a4a;border-radius:6px;padding:7px 12px;color:#fff;font-size:0.85rem;width:220px;}
.tbl-search:focus{outline:none;border-color:#e94560;}
.tbl-sort-hint{font-size:0.75rem;color:#aaa;}
.zig-table{width:100%;border-collapse:collapse;font-size:0.85rem;}
.zig-table thead th{text-align:left;padding:10px 12px;color:#aaa;font-weight:600;font-size:0.75rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #2a2a4a;cursor:pointer;white-space:nowrap;user-select:none;}
.zig-table thead th:hover{color:#fff;}
.zig-table thead th .sort-arrow{margin-left:4px;opacity:.4;}
.zig-table thead th.sorted-asc .sort-arrow::after{content:'▲';opacity:1;}
.zig-table thead th.sorted-desc .sort-arrow::after{content:'▼';opacity:1;}
.zig-table tbody tr{border-bottom:1px solid #1f1f3a;transition:background .15s;}
.zig-table tbody tr:hover{background:#1f1f3a;}
.zig-table tbody td{padding:10px 12px;color:#fff;vertical-align:middle;}
.tbl-name{font-weight:600;}
.tbl-subname{font-size:0.75rem;color:#aaa;margin-top:2px;}
.tbl-score-cell{color:#e94560;font-weight:700;font-size:1rem;}
.tbl-bar{height:6px;background:#2a2a4a;border-radius:3px;margin-top:4px;width:100px;}
.tbl-bar-fill{height:100%;border-radius:3px;transition:width .5s;}
.maturity-chip{display:inline-block;padding:2px 10px;border-radius:12px;font-size:0.72rem;font-weight:600;text-transform:uppercase;white-space:nowrap;}
.chip-preparation{background:#3a3a5a;color:#aaa;}
.chip-basic{background:#1e3a5f;color:#60a5fa;}
.chip-intermediate{background:#1e4a2a;color:#4ade80;}
.chip-advanced{background:#4a1e2a;color:#f472b6;}
.tbl-link{color:#60a5fa;text-decoration:none;font-size:0.8rem;}
.tbl-link:hover{text-decoration:underline;}
.pillar-bar{height:8px;border-radius:4px;background:#2a2a4a;margin:8px 0;}
.pillar-bar-fill{height:100%;border-radius:4px;transition:width .5s;}
</style>
{% endblock %}
{% block content %}
<div class="ext-page">

  <!-- Hero -->
  <div class="ext-hero">
    <h1>ZIG External Portfolio</h1>
    <div class="subtitle">
      NSA Zero Trust Implementation Guide &bull; Portfolio comparison across all 7 pillars &bull;
      FY2027 Target Deadline
      {% if last_assessed %}
        &bull; Last assessed: {{ last_assessed }}
      {% endif %}
    </div>
  </div>

  <!-- ── Section 1: Portfolio Health Bar ── -->
  <div class="health-bar-panel">
    <h2>Portfolio Health</h2>
    <div class="health-kpi-row">
      <div class="health-kpi">
        <div class="kpi-val">{{ portfolio.total_targets }}</div>
        <div class="kpi-lbl">Total Targets</div>
      </div>
      <div class="health-kpi">
        <div class="kpi-val" style="color:#{{ 'f59e0b' if portfolio.avg_score < 0.5 else ('4ade80' if portfolio.avg_score >= 0.75 else 'e94560') }};">
          {{ (portfolio.avg_score * 100)|round(1) }}%
        </div>
        <div class="kpi-lbl">Avg Score</div>
      </div>
      <div class="health-kpi">
        <div class="kpi-val" style="color:#ef4444;">{{ portfolio.attention_count }}</div>
        <div class="kpi-lbl">Need Attention</div>
      </div>
      <div class="health-kpi">
        <div class="kpi-val" style="color:#4ade80;">{{ portfolio.advanced_count }}</div>
        <div class="kpi-lbl">Advanced Level</div>
      </div>
    </div>
    <!-- Maturity Distribution -->
    <div style="margin-bottom:10px;font-size:0.8rem;color:#aaa;font-weight:600;text-transform:uppercase;letter-spacing:.05em;">Maturity Distribution</div>
    <div class="maturity-dist-row">
      {% set dist_items = [
        ('Preparation', portfolio.maturity_dist.preparation, '#6b7280', 'chip-preparation'),
        ('Basic',       portfolio.maturity_dist.basic,       '#60a5fa', 'chip-basic'),
        ('Intermediate',portfolio.maturity_dist.intermediate,'#4ade80', 'chip-intermediate'),
        ('Advanced',    portfolio.maturity_dist.advanced,    '#f472b6', 'chip-advanced'),
      ] %}
      {% for label, count, color, chip_cls in dist_items %}
      <div class="maturity-dist-bar">
        <div class="dist-label">
          <span class="maturity-chip {{ chip_cls }}">{{ label }}</span>
        </div>
        <div class="dist-track" style="margin-top:6px;">
          <div class="dist-fill" style="width:{{ ((count / portfolio.total_targets * 100)|round(0)|int) if portfolio.total_targets else 0 }}%;background:{{ color }};"></div>
        </div>
        <div class="dist-count">{{ count }} / {{ portfolio.total_targets }}</div>
      </div>
      {% endfor %}
    </div>
  </div>

  <!-- ── Section 2: Targets Needing Attention ── -->
  <div class="attention-panel">
    <h2>Targets Needing Attention</h2>
    {% set attention_targets = targets | selectattr('needs_attention') | list %}
    {% if attention_targets %}
    <div class="attention-grid">
      {% for t in attention_targets %}
      <div class="attention-card">
        <h3>{{ t.name }}</h3>
        <div style="display:flex;align-items:baseline;gap:10px;">
          <div class="attn-score">{{ (t.overall_score * 100)|round(1) }}%</div>
          <span class="maturity-chip chip-{{ t.maturity_level }}">{{ t.maturity_level|title }}</span>
        </div>
        <div class="pillar-bar">
          <div class="pillar-bar-fill" style="width:{{ (t.overall_score * 100)|round(0)|int }}%;background:#ef4444;"></div>
        </div>
        <div class="attn-meta">
          {{ t.implemented_capabilities }}/{{ t.capability_count }} capabilities &bull;
          {{ t.complete_activities }}/{{ t.activity_count }} activities
        </div>
        {% if t.weak_pillars %}
        <div class="gap-pills">
          {% for wp in t.weak_pillars %}
          <span class="gap-pill">{{ wp }}</span>
          {% endfor %}
        </div>
        {% endif %}
        <div style="margin-top:12px;">
          <a href="/security/zig/pillar/{{ t.slug }}" class="tbl-link">View pillar &rarr;</a>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="attention-empty">
      &#x2713; All targets are above the attention threshold (50%). Keep up the good work!
    </div>
    {% endif %}
  </div>

  <!-- ── Section 3: Side-by-Side Radar ── -->
  <div class="radar-panel">
    <h2>Side-by-Side Radar (up to 4 targets)</h2>
    <div class="radar-controls" id="radarControls">
      {% set radar_colors = ['#e94560','#60a5fa','#4ade80','#f59e0b'] %}
      {% for t in targets[:4] %}
      <label class="radar-toggle">
        <input type="checkbox" class="radar-cb" data-idx="{{ loop.index0 }}" checked>
        <span class="tog-swatch" style="background:{{ radar_colors[loop.index0] }};"></span>
        <span class="tog-name">{{ t.name }}</span>
      </label>
      {% endfor %}
    </div>
    <div class="radar-canvas-wrap">
      <canvas id="extRadar" height="400"></canvas>
    </div>
  </div>

  <!-- ── Section 4: All Targets Sortable Table ── -->
  <div class="table-panel">
    <h2>All Targets</h2>
    <div class="tbl-toolbar">
      <input class="tbl-search" id="tblSearch" type="text" placeholder="Filter by name...">
      <span class="tbl-sort-hint">Click column headers to sort</span>
    </div>
    <table class="zig-table" id="targetTable">
      <thead>
        <tr>
          <th data-col="name">Pillar / Target<span class="sort-arrow"></span></th>
          <th data-col="score" class="sorted-desc">Score<span class="sort-arrow"></span></th>
          <th data-col="maturity">Maturity<span class="sort-arrow"></span></th>
          <th data-col="capabilities">Capabilities<span class="sort-arrow"></span></th>
          <th data-col="activities">Activities<span class="sort-arrow"></span></th>
          <th data-col="progress">Progress<span class="sort-arrow"></span></th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody id="targetTableBody">
        {% for t in targets %}
        <tr data-name="{{ t.name|lower }}"
            data-score="{{ t.overall_score }}"
            data-maturity="{{ t.maturity_level }}"
            data-capabilities="{{ t.implemented_capabilities }}"
            data-activities="{{ t.complete_activities }}">
          <td>
            <div class="tbl-name">{{ t.name }}</div>
            <div class="tbl-subname">{{ t.full_name }}</div>
          </td>
          <td class="tbl-score-cell">
            {{ (t.overall_score * 100)|round(1) }}%
            <div class="tbl-bar">
              <div class="tbl-bar-fill" style="width:{{ (t.overall_score * 100)|round(0)|int }}%;background:{{ t.color }};"></div>
            </div>
          </td>
          <td><span class="maturity-chip chip-{{ t.maturity_level }}">{{ t.maturity_level|title }}</span></td>
          <td>{{ t.implemented_capabilities }} / {{ t.capability_count }}</td>
          <td>{{ t.complete_activities }} / {{ t.activity_count }}</td>
          <td>
            <div style="display:flex;align-items:center;gap:8px;">
              <div style="flex:1;height:6px;background:#2a2a4a;border-radius:3px;min-width:80px;">
                <div style="height:100%;width:{{ (t.overall_score * 100)|round(0)|int }}%;background:{{ t.color }};border-radius:3px;transition:width .5s;"></div>
              </div>
              <span style="font-size:0.75rem;color:#aaa;white-space:nowrap;">
                {% if t.in_progress_activities > 0 %}
                  {{ t.in_progress_activities }} in progress
                {% endif %}
              </span>
            </div>
          </td>
          <td>
            <a href="/security/zig/pillar/{{ t.slug }}" class="tbl-link">Details &rarr;</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not targets %}
    <div style="text-align:center;padding:40px;color:#aaa;">No targets found.</div>
    {% endif %}
  </div>

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

</div>

<script>
/* ── Radar Chart ── */
const PILLAR_LABELS = {{ pillar_names | tojson }};
const TARGET_DATA   = {{ radar_datasets | tojson }};
const RADAR_COLORS  = ['#e94560','#60a5fa','#4ade80','#f59e0b'];

function buildDatasets(activeSet) {
  return TARGET_DATA.filter((_, i) => activeSet.has(i)).map((t, i) => {
    const origIdx = TARGET_DATA.indexOf(t);
    const c = RADAR_COLORS[origIdx] || '#aaa';
    return {
      label: t.name,
      data: t.scores.map(s => Math.round(s * 100)),
      backgroundColor: c.replace(')', ',0.12)').replace('rgb(', 'rgba(') + (c.startsWith('#') ? '20' : ''),
      borderColor: c,
      pointBackgroundColor: c,
      pointBorderColor: '#fff',
      pointRadius: 4,
      borderWidth: 2,
    };
  });
}

const radarCtx = document.getElementById('extRadar').getContext('2d');
const radarChart = new Chart(radarCtx, {
  type: 'radar',
  data: {
    labels: PILLAR_LABELS,
    datasets: buildDatasets(new Set(TARGET_DATA.map((_, i) => i))),
  },
  options: {
    responsive: true,
    plugins: {
      legend: { labels: { color: '#ccc', font: { size: 11 } } }
    },
    scales: {
      r: {
        min: 0, max: 100,
        ticks: { color: '#aaa', backdropColor: 'transparent', stepSize: 25, font: { size: 10 } },
        grid: { color: '#2a2a4a' },
        angleLines: { color: '#2a2a4a' },
        pointLabels: { color: '#fff', font: { size: 11 } }
      }
    }
  }
});

/* Checkbox toggles */
document.querySelectorAll('.radar-cb').forEach(cb => {
  cb.addEventListener('change', () => {
    const active = new Set();
    document.querySelectorAll('.radar-cb:checked').forEach(c => active.add(parseInt(c.dataset.idx)));
    if (active.size > 4) { cb.checked = false; return; }
    radarChart.data.datasets = buildDatasets(active);
    radarChart.update();
  });
});

/* ── Sortable Table ── */
let sortCol = 'score', sortDir = 'desc';

function getVal(row, col) {
  if (col === 'name') return row.dataset.name || '';
  if (col === 'score') return parseFloat(row.dataset.score) || 0;
  if (col === 'capabilities') return parseInt(row.dataset.capabilities) || 0;
  if (col === 'activities') return parseInt(row.dataset.activities) || 0;
  if (col === 'progress') return parseFloat(row.dataset.score) || 0;
  const matOrder = {preparation:0,basic:1,intermediate:2,advanced:3};
  if (col === 'maturity') return matOrder[row.dataset.maturity] ?? 0;
  return 0;
}

function sortTable() {
  const tbody = document.getElementById('targetTableBody');
  const rows = Array.from(tbody.querySelectorAll('tr'));
  rows.sort((a, b) => {
    const va = getVal(a, sortCol), vb = getVal(b, sortCol);
    if (typeof va === 'string') return sortDir === 'asc' ? va.localeCompare(vb) : vb.localeCompare(va);
    return sortDir === 'asc' ? va - vb : vb - va;
  });
  rows.forEach(r => tbody.appendChild(r));
}

document.querySelectorAll('#targetTable thead th[data-col]').forEach(th => {
  th.addEventListener('click', () => {
    const col = th.dataset.col;
    if (sortCol === col) {
      sortDir = sortDir === 'asc' ? 'desc' : 'asc';
    } else {
      sortCol = col;
      sortDir = col === 'name' ? 'asc' : 'desc';
    }
    document.querySelectorAll('#targetTable thead th').forEach(h => {
      h.classList.remove('sorted-asc','sorted-desc');
    });
    th.classList.add(sortDir === 'asc' ? 'sorted-asc' : 'sorted-desc');
    sortTable();
  });
});

/* Filter */
document.getElementById('tblSearch').addEventListener('input', function() {
  const q = this.value.toLowerCase();
  document.querySelectorAll('#targetTableBody tr').forEach(row => {
    row.style.display = (row.dataset.name || '').includes(q) ? '' : 'none';
  });
});

/* Initial sort */
sortTable();
</script>
{% endblock %}