{% extends "base.html" %}
{% block title %}Snippets — Document Intelligence — 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;font-size:20px;">🧩 Reusable Snippets</h2>
    <p style="color:#7a8cb0;font-size:12px;margin:4px 0 0;">Drop-in building blocks for document workflows — citations, freshness badges, AI labels, drift triggers.</p>
  </div>
  <a href="/document-intelligence/" style="background:#0f3460;color:#7ab3f0;padding:8px 16px;border-radius:5px;text-decoration:none;font-size:13px;">← Back to DIC</a>
</div>

<!-- Category filter -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;">
  <button onclick="filterSnippets('all')" class="scat-btn" 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;">
    <h3 style="margin:0 0 8px;color:#eaeaea;font-size:14px;">{{ s.name }}</h3>
    <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.tags %}
      <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>
  {% else %}
  <p style="color:#7a8cb0;">No snippets available yet.</p>
  {% endfor %}
</div>

<script>
function filterSnippets(cat) {
  document.querySelectorAll('.scat-btn').forEach(function(b) {
    b.style.background = b.dataset.cat === cat ? '#6366f1' : '#1e3a6e';
    b.style.color = b.dataset.cat === cat ? '#fff' : '#7ab3f0';
  });
  document.querySelectorAll('.snippet-card').forEach(function(c) {
    c.style.display = (cat === 'all' || c.dataset.category === cat) ? 'block' : 'none';
  });
}
function copySnippetId(id, btn) {
  navigator.clipboard.writeText(id).then(function() {
    var orig = btn.textContent;
    btn.textContent = '✓ Copied!';
    btn.style.background = '#052e16'; btn.style.color = '#4ade80';
    setTimeout(function() { btn.textContent = orig; btn.style.background = '#0f3460'; btn.style.color = '#7ab3f0'; }, 2000);
  });
}
</script>

{% set iqe_canvas = "dic" %}
{% set iqe_api_route = "/document-intelligence/api/iqe-query" %}
{% set iqe_title = "IQE Query — Snippets" %}
{% set iqe_examples = [
  {"label": "Snippet usage", "query": "foreach s in dic.snippets select s.snippet_id, s.category, s.use_count"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}