{% extends "base.html" %}
{% block title %}Canvas Compliance Posture — ICDEV™{% endblock %}
{% block content %}
<div class="page-header"><h1>Canvas Compliance Posture</h1></div>
<p style="color:#7a8cb0;margin-bottom:20px;">Aggregate compliance scores across all 9 design canvases.</p>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;">
  {% set canvases = [
    ('IDC', 'Infrastructure', '/infra/', '#00bcd4'),
    ('NDC', 'Network', '/network/', '#e91e63'),
    ('SDC', 'Security', '/security/', '#ff5722'),
    ('BDC', 'Boundary', '/boundary/', '#9c27b0'),
    ('PDC', 'Pipeline', '/devops/', '#f44336'),
    ('ODC', 'Observability', '/observability/', '#4caf50'),
    ('DDC', 'Data', '/data/', '#ff9800'),
    ('QDC', 'Quality', '/quality/', '#2196f3'),
    ('MDC', 'Migration', '/migration-canvas/', '#795548'),
  ] %}
  {% for key, name, path, color in canvases %}
  <a href="{{ path }}" style="text-decoration:none;">
    <div class="card" style="padding:20px;border-left:4px solid {{ color }};transition:transform 0.15s;" onmouseenter="this.style.transform='translateY(-2px)'" onmouseleave="this.style.transform='none'">
      <div style="display:flex;justify-content:space-between;align-items:center;">
        <div>
          <div style="font-size:14px;font-weight:600;color:#eaeaea;">{{ name }}</div>
          <div style="font-size:11px;color:#7a8cb0;">{{ key }} Design Canvas</div>
        </div>
        <div style="font-size:24px;font-weight:700;color:{{ color }};">{{ key }}</div>
      </div>
    </div>
  </a>
  {% endfor %}
</div>
{% endblock %}