{% extends "network/base.html" %}
{% block title %}Replacement Map — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Equipment Replacement Map</h1>
    <p class="page-subtitle">Map old models to approved replacements for tech refresh planning</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('rep-modal').style.display='flex'">+ Add Mapping</button>
  </div>
</div>
<div id="rep-list"></div>

<div id="rep-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Add Replacement Mapping</h3>
    <form onsubmit="return addReplacement(event)">
      <div class="form-grid">
        <label>Old Vendor <input name="old_vendor" required placeholder="Cisco"></label>
        <label>Old Model <input name="old_model" required placeholder="ASR1001-X"></label>
        <label>New Vendor <input name="new_vendor" required placeholder="Cisco"></label>
        <label>New Model <input name="new_model" required placeholder="C8300-2N2S-4T2X"></label>
        <label>New Cost ($) <input name="new_cost" type="number" value="0"></label>
        <label>Migration Effort <select name="migration_effort"><option>low</option><option value="medium" selected>medium</option><option>high</option></select></label>
        <label style="grid-column:span 2">Notes <input name="notes" placeholder="Config migration notes, compatibility"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Add</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
async function load() {
  const d = await fetch(NC_BASE + '/api/replacement-map').then(r => r.json());
  const el = document.getElementById('rep-list');
  if (!d.length) { el.innerHTML = '<section class="panel panel-wide"><div style="padding:16px;color:var(--text-dim);">No replacement mappings yet.</div></section>'; return; }
  el.innerHTML = '<section class="panel panel-wide"><div class="panel-header"><h2 class="panel-title">All Mappings (' + d.length + ')</h2></div><table class="data-table"><thead><tr><th>Old Vendor</th><th>Old Model</th><th>New Vendor</th><th>New Model</th><th>Cost</th><th>Effort</th><th>Notes</th><th>Actions</th></tr></thead><tbody>' +
    d.map(r => '<tr><td>' + r.old_vendor + '</td><td><strong>' + r.old_model + '</strong></td><td>' + r.new_vendor + '</td><td><strong>' + r.new_model + '</strong></td><td>$' + (r.new_cost || 0).toLocaleString() + '</td><td>' + r.migration_effort + '</td><td style="color:var(--text-dim);font-size:11px;">' + (r.notes || '') + '</td><td class="actions"><button class="action-btn danger" onclick="del(\'' + r.id + '\')">&#x2715;</button></td></tr>').join('') +
    '</tbody></table></section>';
}
function addReplacement(e) { e.preventDefault(); const fd = new FormData(e.target), d = {}; fd.forEach((v,k) => d[k] = v);
  d.new_cost = parseFloat(d.new_cost) || 0;
  fetch(NC_BASE + '/api/replacement-map', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(d)}).then(() => location.reload()); return false; }
async function del(id) { if(!confirm('Delete?')) return; await fetch(NC_BASE + '/api/replacement-map/' + id, {method:'DELETE'}); location.reload(); }
load();
</script>
{% endblock %}