{% extends "security_canvas/base.html" %}
{% block title %}ZIG Roadmap — FY2027 / FY2032{% endblock %}
{% block head %}
<style>
.timeline{position:relative;padding-left:40px;margin-bottom:24px;}
.timeline::before{content:'';position:absolute;left:16px;top:0;bottom:0;width:2px;background:#2a2a4a;}
.milestone{position:relative;margin-bottom:32px;}
.milestone-dot{position:absolute;left:-32px;width:18px;height:18px;border-radius:50%;border:2px solid #e94560;background:#0f0f1a;top:4px;}
.milestone-dot.done{background:#4ade80;border-color:#4ade80;}
.milestone-dot.active{background:#f59e0b;border-color:#f59e0b;}
.milestone-dot.future{background:#0f0f1a;border-color:#2a2a4a;}
.milestone-card{background:#1a1a2e;border-radius:8px;padding:16px;border:1px solid #2a2a4a;}
.milestone-card.fy2027{border-color:#e94560;}
.milestone-card.fy2032{border-color:#8b5cf6;}
.deadline-badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:0.75rem;font-weight:600;}
.badge-fy2027{background:#3a1e1e;color:#e94560;}
.badge-fy2032{background:#2a1e4a;color:#8b5cf6;}
.pillar-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #2a2a3a;}
.pillar-row:last-child{border-bottom:none;}
.pbar{flex:1;height:6px;background:#2a2a4a;border-radius:3px;overflow:hidden;}
.pbar-fill{height:100%;border-radius:3px;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px;}
.stat-box{background:#1a1a2e;border-radius:8px;padding:16px;text-align:center;border:1px solid #2a2a4a;}
.stat-val{font-size:1.5rem;font-weight:700;color:#e94560;}
.stat-lbl{font-size:0.75rem;color:#aaa;margin-top:4px;}
</style>
{% endblock %}
{% block content %}
<div style="padding:24px;max-width:1100px;margin:0 auto;">

  <div style="font-size:0.8rem;color:#666;margin-bottom:16px;">
    <a href="/security/zig/" style="color:#60a5fa;">ZIG Overview</a> &rsaquo; Roadmap
  </div>

  <h1 style="color:#fff;margin:0 0 24px;font-size:1.5rem;">ZIG Compliance Roadmap</h1>

  <!-- Summary Stats -->
  <div class="stat-grid">
    <div class="stat-box">
      <div class="stat-val">{{ roadmap.overall_pct_complete }}%</div>
      <div class="stat-lbl">Overall Progress</div>
    </div>
    <div class="stat-box">
      <div class="stat-val">{{ roadmap.total_complete_activities }}</div>
      <div class="stat-lbl">Activities Complete</div>
    </div>
    <div class="stat-box">
      <div class="stat-val">{{ roadmap.total_target_activities }}</div>
      <div class="stat-lbl">Target Activities (FY2027)</div>
    </div>
    <div class="stat-box" style="border-color:#e94560;">
      <div class="stat-val" style="color:#e94560;font-size:1rem;">Sep 30, 2027</div>
      <div class="stat-lbl">FY2027 Deadline</div>
    </div>
    <div class="stat-box" style="border-color:#8b5cf6;">
      <div class="stat-val" style="color:#8b5cf6;font-size:1rem;">Sep 30, 2032</div>
      <div class="stat-lbl">FY2032 Advanced</div>
    </div>
  </div>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;">
    <!-- Timeline -->
    <div>
      <h3 style="color:#fff;margin-bottom:16px;">Implementation Timeline</h3>
      <div class="timeline">
        {% for m in roadmap.milestones %}
        {% set pct = (m.complete / m.activities * 100)|round(0)|int if m.activities > 0 else 0 %}
        {% set dot_class = 'done' if pct == 100 else ('active' if pct > 0 else 'future') %}
        <div class="milestone">
          <div class="milestone-dot {{ dot_class }}"></div>
          <div class="milestone-card {% if 'FY2027' in m.label %}fy2027{% elif 'FY2032' in m.label %}fy2032{% endif %}">
            <div style="display:flex;justify-content:space-between;align-items:flex-start;">
              <div style="font-weight:600;color:#fff;font-size:0.9rem;">{{ m.label }}</div>
              {% if 'FY2027' in m.label %}<span class="deadline-badge badge-fy2027">FY2027 Target</span>
              {% elif 'FY2032' in m.label %}<span class="deadline-badge badge-fy2032">FY2032 Advanced</span>{% endif %}
            </div>
            <div style="font-size:0.75rem;color:#888;margin-top:4px;">{{ m.target_date }}</div>
            <div style="font-size:0.8rem;color:#aaa;margin-top:8px;">{{ m.description }}</div>
            {% if m.get('note') %}<div style="font-size:0.75rem;color:#666;margin-top:6px;font-style:italic;">{{ m.note }}</div>{% endif %}
            <div style="margin-top:10px;">
              <div style="display:flex;justify-content:space-between;font-size:0.75rem;color:#aaa;margin-bottom:4px;">
                <span>{{ m.complete }}/{{ m.activities }} activities</span>
                <span>{{ pct }}%</span>
              </div>
              <div style="background:#2a2a4a;border-radius:4px;height:6px;overflow:hidden;">
                <div style="height:100%;background:{% if 'FY2027' in m.label %}#e94560{% elif 'FY2032' in m.label %}#8b5cf6{% else %}#4ade80{% endif %};border-radius:4px;width:{{ pct }}%;"></div>
              </div>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>

    <!-- Pillar Progress -->
    <div>
      <h3 style="color:#fff;margin-bottom:16px;">Pillar Implementation Progress</h3>
      <div style="background:#1a1a2e;border-radius:10px;padding:16px;border:1px solid #2a2a4a;">
        {% for ps in roadmap.pillar_summaries %}
        <div class="pillar-row">
          <div style="width:120px;color:#fff;font-size:0.85rem;">{{ ps.name }}</div>
          <div class="pbar">
            <div class="pbar-fill" style="width:{{ (ps.implemented / ps.total_caps * 100)|round(0)|int if ps.total_caps > 0 else 0 }}%;background:{{ ps.color }};"></div>
          </div>
          <div style="width:50px;text-align:right;font-size:0.8rem;color:#aaa;">{{ ps.implemented }}/{{ ps.total_caps }}</div>
          <a href="/security/zig/pillar/{{ ps.slug }}" style="color:#60a5fa;font-size:0.75rem;">Detail</a>
        </div>
        {% endfor %}
      </div>

      <div style="margin-top:20px;background:#1a1a2e;border-radius:10px;padding:16px;border:1px solid #2a2a4a;">
        <h4 style="color:#fff;margin:0 0 12px;font-size:0.9rem;">Key Resources</h4>
        <ul style="color:#aaa;font-size:0.8rem;line-height:2;margin:0;padding-left:16px;">
          <li><a href="https://media.defense.gov/2026/Jan/08/2003852320/-1/-1/0/CTR_ZERO_TRUST_IMPLEMENTATION_GUIDELINE_PRIMER.PDF" target="_blank" style="color:#60a5fa;">ZIG Primer (Jan 2026)</a></li>
          <li><a href="https://media.defense.gov/2026/Jan/08/2003852321/-1/-1/0/CTR_ZIG_DISCOVERY_PHASE.PDF" target="_blank" style="color:#60a5fa;">ZIG Discovery Phase</a></li>
          <li><a href="https://media.defense.gov/2026/Jan/30/2003868308/-1/-1/0/CTR_ZIG_PHASE_ONE.PDF" target="_blank" style="color:#60a5fa;">ZIG Phase One</a></li>
          <li><a href="https://media.defense.gov/2026/Jan/30/2003868302/-1/-1/0/CTR_ZIG_PHASE_TWO.PDF" target="_blank" style="color:#60a5fa;">ZIG Phase Two</a></li>
          <li><a href="https://www.nsa.gov/Cybersecurity/ZIG/" target="_blank" style="color:#60a5fa;">NSA ZIG Interactive Resource</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div style="margin-top:24px;text-align:center;">
    <a href="/security/zig/" style="color:#60a5fa;">&larr; ZIG Overview</a>
    &nbsp;&nbsp;
    <a href="/security/zig/assessment" style="color:#60a5fa;">Run Assessment &rarr;</a>
  </div>
</div>
{% endblock %}