{% extends "base.html" %}
{% block title %}AIMC Snippets{% endblock %}
{% block content %}
<div style="margin-bottom:24px;">
  <h1 style="margin:0 0 4px;font-size:1.4rem;color:#e0e7ff;">AIMC Snippet Library</h1>
  <p style="margin:0;color:#64748b;font-size:.85rem;">Reusable component groups — insert into any canvas design.</p>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
{% for snp in snippets %}
<div style="background:#1e293b;border:1px solid #334155;border-radius:10px;padding:18px;">
  <h3 style="margin:0 0 4px;font-size:.95rem;color:#e2e8f0;">{{ snp.name }}</h3>
  <p style="font-size:.78rem;color:#94a3b8;margin:4px 0 10px;">{{ snp.description }}</p>
  <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;">
    {% for tag in snp.tags %}
    <span style="background:#334155;color:#94a3b8;border-radius:4px;padding:2px 7px;font-size:.68rem;">{{ tag }}</span>
    {% endfor %}
  </div>
  <div style="font-size:.72rem;color:#475569;">
    {{ (snp.graph.nodes or [])|length }} nodes, {{ (snp.graph.edges or [])|length }} edges
  </div>
</div>
{% else %}
<p style="color:#64748b;grid-column:1/-1;">No snippets available.</p>
{% endfor %}
</div>
{% endblock %}