{% extends "network/base.html" %}
{% block title %}Edit Template: {{ tpl.name }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Edit Template</h1>
    <p class="page-subtitle">Customize metadata and open in canvas to modify the design</p>
  </div>
  <div class="page-actions">
    <a href="/network/templates" class="btn btn-secondary">&larr; Gallery</a>
  </div>
</div>

<div class="edit-layout">
  <!-- Metadata Form -->
  <div class="edit-card">
    <h2 class="edit-card-title">Template Metadata</h2>
    <form id="tpl-meta-form" onsubmit="return saveMeta(event)">
      <div class="form-group">
        <label>Template ID</label>
        <input type="text" class="form-control" value="{{ tpl.id }}" readonly/>
      </div>
      <div class="form-group">
        <label>Name</label>
        <input type="text" id="meta-name" class="form-control" value="{{ tpl.name }}"/>
      </div>
      <div class="form-group">
        <label>Category</label>
        <input type="text" id="meta-category" class="form-control" value="{{ tpl.category }}"
               list="cat-suggestions" placeholder="e.g. Campus LAN, Data Center, Security"/>
        <datalist id="cat-suggestions">
          <option value="Campus LAN"/>
          <option value="Data Center"/>
          <option value="Security"/>
          <option value="WAN / VPN"/>
          <option value="Service Provider"/>
          <option value="Transport"/>
          <option value="Quantum"/>
          <option value="Tactical / Military"/>
          <option value="Metropolitan"/>
        </datalist>
      </div>
      <div class="form-group">
        <label>Description</label>
        <textarea id="meta-desc" class="form-control" rows="4">{{ tpl.description }}</textarea>
      </div>
      <div class="form-group">
        <label>Tags (comma-separated)</label>
        <input type="text" id="meta-tags" class="form-control"
               value="{{ tpl.tags|join(', ') }}"/>
      </div>
      <div class="form-group">
        <label>Graph</label>
        <p class="text-dim">{{ tpl.node_count }} nodes, {{ tpl.edge_count }} edges</p>
      </div>
      <div class="form-actions" style="display:flex; gap:8px; flex-wrap:wrap;">
        <button type="submit" class="btn btn-primary">Save Metadata</button>
        <button type="button" class="btn btn-secondary" onclick="editInCanvas()">Edit Design in Canvas &rarr;</button>
      </div>
      <div id="save-status" class="save-status"></div>
    </form>
  </div>

  <!-- Quick Preview -->
  <div class="edit-card">
    <h2 class="edit-card-title">Quick Preview</h2>
    <div id="preview-area" class="preview-area"></div>
    <p class="text-dim" style="margin-top:8px;">Open in canvas for full interactive editing.</p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<!-- JointJS for preview — vendored locally for air-gap / IL5-IL6 -->
<link rel="stylesheet" href="{{ url_for('static', filename='js/vendor/joint.css') }}"/>
<script src="{{ url_for('static', filename='js/vendor/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/lodash.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/backbone.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/joint.js') }}"></script>
<script>
const TPL_ID = "{{ tpl.id }}";

async function saveMeta(e) {
  e.preventDefault();
  const tags = document.getElementById('meta-tags').value
    .split(',').map(t => t.trim()).filter(t => t);
  const payload = {
    name: document.getElementById('meta-name').value,
    category: document.getElementById('meta-category').value,
    description: document.getElementById('meta-desc').value,
    tags: tags,
  };
  const r = await fetch(NC_BASE + `/api/templates/${TPL_ID}`, {
    method: 'PUT',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(payload),
  });
  const data = await r.json();
  const el = document.getElementById('save-status');
  if (data.ok) {
    el.textContent = 'Saved.';
    el.className = 'save-status save-ok';
  } else {
    el.textContent = 'Error: ' + (data.error || 'unknown');
    el.className = 'save-status save-err';
  }
  setTimeout(() => { el.textContent = ''; }, 3000);
}

async function editInCanvas() {
  // Load template as a topology so it can be edited, then save back
  const r = await fetch(NC_BASE + `/api/templates/${TPL_ID}/load`, {method: 'POST'});
  const data = await r.json();
  if (data.redirect) {
    // Pass template ID so canvas knows to save back to template
    window.location.href = data.redirect + '?save_to_template=' + TPL_ID;
  }
}

// Preview
async function loadPreview() {
  const r = await fetch(NC_BASE + `/api/templates/${TPL_ID}`);
  const tpl = await r.json();
  if (!tpl.graph_json) return;

  const graph = new joint.dia.Graph();
  const paper = new joint.dia.Paper({
    el: document.getElementById('preview-area'),
    model: graph,
    width: '100%',
    height: 360,
    gridSize: 10,
    background: {color: 'transparent'},
    interactive: false,
  });

  const nodes = tpl.graph_json.nodes || [];
  const edges = tpl.graph_json.edges || [];
  nodes.forEach(n => {
    const el = new joint.shapes.standard.Rectangle({
      id: n.id,
      position: {x: n.x, y: n.y},
      size: {width: 90, height: 44},
      attrs: {
        body: {fill: '#0f3460', stroke: '#e94560', strokeWidth: 1, rx: 4, ry: 4},
        label: {text: n.label || n.type, fill: '#eaeaea', fontSize: 9,
                fontFamily: 'Cascadia Code, Consolas, monospace'}
      }
    });
    graph.addCell(el);
  });
  edges.forEach(e => {
    if (!e.source || !e.target) return;
    const link = new joint.shapes.standard.Link({
      source: {id: e.source}, target: {id: e.target},
      attrs: {line: {stroke: '#e94560', strokeWidth: 1,
              targetMarker: {type: 'classic', fill: '#e94560', size: 4}}}
    });
    graph.addCell(link);
  });
  paper.scaleContentToFit({padding: 15, maxScale: 1.2});
}
document.addEventListener('DOMContentLoaded', loadPreview);
</script>
<style>
.edit-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .edit-layout { grid-template-columns: 1fr; } }
.edit-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px;
}
.edit-card-title { font-size: 14px; font-weight: 700; color: var(--text-dim); margin-bottom: 16px; }
.preview-area { background: #12122a; border-radius: 8px; min-height: 360px; overflow: hidden; }
.save-status { margin-top: 8px; font-size: 12px; }
.save-ok { color: #2ecc71; }
.save-err { color: #e94560; }
.text-dim { color: var(--text-dim); font-size: 12px; }
</style>
{% endblock %}