{% extends "base.html" %}
{% block title %}AADC Snippets — ICDEV™{% endblock %}
{% block content %}
<div class="cui-banner" style="background:#1a1a2e;border:1px solid #e94560;padding:4px 12px;font-size:11px;color:#e94560;text-align:center;margin-bottom:12px;">CUI // SP-CTI</div>

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
  <div>
    <h2 style="margin:0;color:#eaeaea;">🧩 Agentic AI Snippets</h2>
    <p style="color:#7a8cb0;font-size:13px;margin:4px 0 0;">12 reusable subgraph patterns — insert into any design from the canvas editor sidebar</p>
  </div>
  <a href="/agentic-ai/" style="background:#0f3460;color:#7ab3f0;padding:8px 16px;border-radius:5px;text-decoration:none;font-size:13px;">← Back to AADC</a>
</div>

<!-- Category filter -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
  <button onclick="filterSnippets('all')" class="scat-btn active" data-cat="all"
    style="background:#6366f1;color:#fff;padding:5px 14px;border:none;border-radius:20px;cursor:pointer;font-size:12px;">All</button>
  {% set cats = snippets|map(attribute='category')|unique|list %}
  {% for cat in cats %}
  <button onclick="filterSnippets('{{ cat }}')" class="scat-btn" data-cat="{{ cat }}"
    style="background:#1e3a6e;color:#7ab3f0;padding:5px 14px;border:none;border-radius:20px;cursor:pointer;font-size:12px;">{{ cat|title }}</button>
  {% endfor %}
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;" id="snippet-grid">
  {% for s in snippets %}
  <div class="snippet-card" data-category="{{ s.category }}"
    style="background:#16213e;border:1px solid #1e3a6e;border-radius:8px;padding:16px;">
    <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:8px;">
      <h3 style="margin:0;color:#eaeaea;font-size:14px;">{{ s.name }}</h3>
      <span style="background:#0f3460;color:#7a8cb0;padding:2px 7px;border-radius:3px;font-size:10px;">{{ s.node_count }} nodes</span>
    </div>
    <p style="color:#7a8cb0;font-size:12px;margin:0 0 10px;">{{ s.description }}</p>
    <div style="display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px;">
      <span style="background:#1e293b;color:#6366f1;padding:2px 7px;border-radius:3px;font-size:10px;font-weight:600;">{{ s.category }}</span>
      {% for tag in s.tag_list %}
      <span style="background:#1e293b;color:#94a3b8;padding:1px 5px;border-radius:2px;font-size:10px;">{{ tag }}</span>
      {% endfor %}
    </div>
    <button onclick="copySnippetId('{{ s.id }}', this)"
      style="width:100%;background:#0f3460;color:#7ab3f0;padding:6px;border:1px solid #1e3a6e;border-radius:4px;cursor:pointer;font-size:12px;">
      Copy Snippet ID
    </button>
  </div>
  {% endfor %}
</div>

<script>
function filterSnippets(cat) {
  document.querySelectorAll('.scat-btn').forEach(b => {
    b.style.background = b.dataset.cat === cat ? '#6366f1' : '#1e3a6e';
    b.style.color = b.dataset.cat === cat ? '#fff' : '#7ab3f0';
  });
  document.querySelectorAll('.snippet-card').forEach(c => {
    c.style.display = (cat === 'all' || c.dataset.category === cat) ? 'block' : 'none';
  });
}

function copySnippetId(id, btn) {
  navigator.clipboard.writeText(id).then(() => {
    const orig = btn.textContent;
    btn.textContent = '✓ Copied!';
    btn.style.background = '#052e16';
    btn.style.color = '#4ade80';
    setTimeout(() => { btn.textContent = orig; btn.style.background = '#0f3460'; btn.style.color = '#7ab3f0'; }, 2000);
  });
}
</script>
{% endblock %}