{% extends "network/base.html" %}
{% block title %}Template Gallery — Network Design Canvas{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Network Template Gallery</h1>
    <p class="page-subtitle">{{ templates|length }} enterprise-grade network design templates</p>
  </div>
  <div class="page-actions">
    <a href="/network/" class="btn btn-secondary">← Dashboard</a>
    <a href="/network/canvas/new" class="btn btn-primary">+ Blank Topology</a>
  </div>
</div>

<!-- Filter Bar -->
<div class="filter-bar">
  <span class="filter-label">Filter:</span>
  {% set cats = categories.keys()|list %}
  <button class="filter-btn active" onclick="filterCat('all', this)">All ({{ templates|length }})</button>
  {% for cat in cats %}
  <button class="filter-btn" onclick="filterCat('{{ cat }}', this)">{{ cat }} ({{ categories[cat]|length }})</button>
  {% endfor %}
</div>

<!-- Template Cards -->
{% for cat, tpls in categories.items() %}
<div class="tpl-category-section" data-category="{{ cat }}">
  <h2 class="tpl-category-title">{{ cat }}</h2>
  <div class="tpl-cards-grid">
    {% for t in tpls %}
    <div class="tpl-card" data-cat="{{ cat }}">
      <!-- SVG Thumbnail -->
      <div class="tpl-thumbnail">
        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
          {% set graph = t.get('graph_json', {}) if t.get('graph_json') is mapping else {} %}
          <!-- Simple placeholder diagram lines -->
          <rect x="5" y="40" width="30" height="20" rx="3" fill="#0f3460" stroke="#e94560" stroke-width="1"/>
          <text x="20" y="54" text-anchor="middle" fill="#eaeaea" font-size="6">Node 1</text>
          <line x1="35" y1="50" x2="80" y2="50" stroke="#e94560" stroke-width="1"/>
          <rect x="80" y="40" width="40" height="20" rx="3" fill="#0f3460" stroke="#e94560" stroke-width="1"/>
          <text x="100" y="54" text-anchor="middle" fill="#eaeaea" font-size="6">Node 2</text>
          <line x1="120" y1="50" x2="165" y2="50" stroke="#e94560" stroke-width="1"/>
          <rect x="165" y="40" width="30" height="20" rx="3" fill="#0f3460" stroke="#e94560" stroke-width="1"/>
          <text x="180" y="54" text-anchor="middle" fill="#eaeaea" font-size="6">Node 3</text>
          <text x="100" y="20" text-anchor="middle" fill="#7a8cb0" font-size="7">{{ cat }}</text>
        </svg>
      </div>
      <div class="tpl-card-body">
        <div class="tpl-card-cat">{{ t.category }}</div>
        <h3 class="tpl-card-name">{{ t.name }}</h3>
        <p class="tpl-card-desc">{{ t.description }}</p>
        <div class="tpl-card-tags">
          {% for tag in t.tags %}
          <span class="tag">{{ tag }}</span>
          {% endfor %}
        </div>
        <div class="tpl-card-actions">
          <button class="btn btn-primary" onclick="loadTpl('{{ t.id }}')">Load &rarr;</button>
          <a href="/network/template/{{ t.id }}/edit" class="btn btn-secondary">Edit</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endfor %}
{% endblock %}

{% block scripts %}
<script>
function filterCat(cat, btn) {
  document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  document.querySelectorAll('.tpl-category-section').forEach(sec => {
    if (cat === 'all' || sec.dataset.category === cat) {
      sec.style.display = '';
    } else {
      sec.style.display = 'none';
    }
  });
}

async function loadTpl(id) {
  const r = await fetch(NC_BASE + `/api/templates/${id}/load`, {method: 'POST'});
  const data = await r.json();
  if (data.redirect) window.location.href = data.redirect;
  else alert('Error: ' + JSON.stringify(data));
}
</script>
{% endblock %}