{% extends "network/base.html" %}
{% block title %}Design Patterns — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Design Pattern Library</h1>
    <p class="page-subtitle">Built-in + user-defined network micro-templates</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('pat-modal').style.display='flex'">+ Custom Pattern</button>
  </div>
</div>
<div class="stats-bar" id="pat-stats"></div>
<div id="pat-list" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;"></div>

<div id="pat-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Create Custom Pattern</h3>
    <form onsubmit="return createPattern(event)">
      <div class="form-grid">
        <label>Name <input name="name" required placeholder="My Custom Pattern"></label>
        <label>Category <select name="category"><option>custom</option><option>routing</option><option>redundancy</option><option>security</option><option>wan</option><option>campus</option><option>cloud</option></select></label>
        <label style="grid-column:span 2">Description <input name="description" placeholder="What this pattern does"></label>
        <label style="grid-column:span 2">Tags (comma-separated) <input name="tags" placeholder="e.g., bgp, peering, partner"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Create</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function loadPatterns() {
  const d = await fetch(NC_BASE + '/api/design-patterns').then(r => r.json());
  const cats = await fetch(NC_BASE + '/api/design-patterns/categories').then(r => r.json());
  document.getElementById('pat-stats').innerHTML = '<div class="stat-card"><div class="stat-value">' + d.length + '</div><div class="stat-label">Patterns</div></div>' +
    cats.map(c => '<div class="stat-card"><div class="stat-value">' + c.count + '</div><div class="stat-label">' + c.category + '</div></div>').join('');
  const el = document.getElementById('pat-list');
  el.innerHTML = d.map(p => `
    <div class="panel" style="padding:12px;">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
        <strong style="flex:1;">${p.name}</strong>
        ${p.is_builtin ? '<span class="health-pill pill-blue" style="font-size:9px;">Built-in</span>' : '<span class="health-pill pill-green" style="font-size:9px;">Custom</span>'}
        <span class="badge">${p.category}</span>
      </div>
      <div style="font-size:11px;color:var(--text-dim);margin-bottom:6px;">${p.description || ''}</div>
      <div style="font-size:10px;color:var(--text-dim);margin-bottom:8px;">${(p.tags || []).map(t => '<span style="background:var(--accent);padding:1px 6px;border-radius:8px;margin-right:4px;">' + t + '</span>').join('')}</div>
      <div style="display:flex;gap:6px;">
        <a href="${NC_BASE}/canvas/new" class="btn btn-secondary" style="font-size:10px;padding:3px 8px;">Load in Canvas</a>
        ${!p.is_builtin ? '<button class="action-btn danger" onclick="deletePattern(\'' + p.id + '\')">&#x2715;</button>' : ''}
      </div>
    </div>
  `).join('');
}
function createPattern(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  d.tags = d.tags ? d.tags.split(',').map(t => t.trim()) : [];
  d.graph_json = {nodes: [], edges: []};
  fetch(NC_BASE + '/api/design-patterns', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
async function deletePattern(id) { if(!confirm('Delete?')) return; await fetch(NC_BASE + '/api/design-patterns/' + id, {method:'DELETE'}); location.reload(); }
loadPatterns();
</script>
{% endblock %}