{% extends "network/base.html" %}
{% block title %}Design Rules — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Network Design Rules &amp; Best Practices</h1>
    <p class="page-subtitle">Deterministic rulebook — works fully air-gapped, no LLM required</p>
  </div>
</div>
<div id="rules-loading" style="color:var(--text-dim);padding:20px;">Loading...</div>
<div id="rules-content" style="display:none;"></div>
{% endblock %}
{% block scripts %}
<script>
async function loadRules() {
  const d = await fetch(NC_BASE + '/api/design-rules').then(r => r.json());
  document.getElementById('rules-loading').style.display = 'none';
  const el = document.getElementById('rules-content');
  el.style.display = 'block';
  let html = '';
  // Node-specific rules
  const nodes = d.on_node_add || {};
  html += '<section class="panel panel-wide"><div class="panel-header"><h2 class="panel-title">Per-Device Rules (' + Object.keys(nodes).length + ' device types)</h2></div><div style="padding:12px;">';
  Object.entries(nodes).forEach(([type, rules]) => {
    html += '<div style="margin-bottom:16px;"><h4 style="color:var(--red);margin-bottom:6px;">' + type + '</h4>';
    (rules.suggestions || []).forEach(s => { html += '<div style="font-size:11px;padding:2px 0 2px 12px;border-left:2px solid #3498db;margin:2px 0;">' + s + '</div>'; });
    const cl = rules.checklist || {};
    if (Object.keys(cl).length) {
      html += '<div style="margin-top:4px;font-size:10px;color:var(--text-dim);">Checklist: ' + Object.entries(cl).map(([k,v]) => '<strong>' + k.replace(/_/g,' ') + '</strong>' + (v.required ? ' (required)' : '') + (v.hint ? ' — ' + v.hint : '')).join(' | ') + '</div>';
    }
    html += '</div>';
  });
  html += '</div></section>';
  // Best practices
  const bp = d.best_practices || {};
  html += '<section class="panel panel-wide" style="margin-top:16px;"><div class="panel-header"><h2 class="panel-title">Best Practices (' + Object.keys(bp).length + ' categories)</h2></div><div style="padding:12px;">';
  Object.entries(bp).forEach(([cat, items]) => {
    html += '<div style="margin-bottom:12px;"><h4 style="color:var(--success);text-transform:capitalize;">' + cat.replace(/_/g,' ') + '</h4>';
    items.forEach(i => { html += '<div style="font-size:11px;padding:2px 0 2px 12px;border-left:2px solid #27ae60;margin:2px 0;">' + i + '</div>'; });
    html += '</div>';
  });
  html += '</div></section>';
  // IPv6 rules
  const v6 = d.ipv6_rules || {};
  if (v6.security) {
    html += '<section class="panel panel-wide" style="margin-top:16px;"><div class="panel-header"><h2 class="panel-title">IPv6 Security &amp; Migration</h2></div><div style="padding:12px;">';
    (v6.security || []).forEach(s => { html += '<div style="font-size:11px;padding:2px 0 2px 12px;border-left:2px solid #e74c3c;margin:2px 0;">' + s + '</div>'; });
    html += '</div></section>';
  }
  el.innerHTML = html;
}
loadRules();
</script>
{% endblock %}