{% extends "network/base.html" %}
{% block title %}IPAM — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">IP Address Management</h1>
    <p class="page-subtitle">Subnet allocations, VLANs, and VRF assignments</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('add-modal').style.display='flex'">+ Address Block</button>
  </div>
</div>

<!-- Project Filter Bar -->
{% if all_projects %}
<div class="project-filter-bar">
  <label>Project:</label>
  <select onchange="filterByProject(this.value)">
    <option value="">All Blocks</option>
    {% for proj in all_projects %}
    <option value="{{ proj.id }}" {% if filter_project == proj.id %}selected{% endif %}>{{ proj.name }}</option>
    {% endfor %}
  </select>
  {% if active_project %}
  <span class="filter-active">Showing: {{ active_project.name }}</span>
  <button class="btn-clear-filter" onclick="filterByProject('')">Clear Filter</button>
  {% endif %}
</div>
{% endif %}

<section class="panel panel-wide">
  <div class="panel-header"><h2 class="panel-title">Address Blocks ({{ blocks|length }})</h2></div>
  {% if blocks %}
  <table class="data-table">
    <thead><tr><th>Network</th><th>VLAN</th><th>VRF</th><th>Gateway</th><th>Description</th><th>Utilization</th><th>Actions</th></tr></thead>
    <tbody>
    {% for b in blocks %}
      <tr>
        <td><strong>{{ b.network }}</strong></td>
        <td>{{ b.vlan_id or '—' }}</td>
        <td>{{ b.vrf }}</td>
        <td>{{ b.gateway or '—' }}</td>
        <td>{{ b.description }}</td>
        <td>
          <div class="util-bar"><div class="util-fill {% if b.utilization_pct > 80 %}critical{% elif b.utilization_pct > 60 %}warning{% endif %}" style="width:{{ b.utilization_pct }}%"></div></div>
          {{ b.utilization_pct }}%
        </td>
        <td class="actions">
          <button class="action-btn" onclick="editBlock('{{ b.id }}','{{ b.network }}','{{ b.vlan_id or '' }}','{{ b.vrf }}','{{ b.gateway or '' }}','{{ b.description }}',{{ b.utilization_pct }})" title="Edit">✏</button>
          <button class="action-btn danger" onclick="delBlock('{{ b.id }}')" title="Delete">✕</button>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  {% else %}<p style="padding:1rem;color:var(--text-muted);">No address blocks. Click "+ Address Block" to allocate.</p>{% endif %}
</section>

<div id="add-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Add Address Block</h3>
    <form onsubmit="return submitBlock(event)">
      <div class="form-grid">
        <label>Network (CIDR) <input name="network" required placeholder="10.1.0.0/24"></label>
        <label>VLAN ID <input name="vlan_id" type="number" placeholder="100"></label>
        <label>VRF <input name="vrf" value="global"></label>
        <label>Gateway <input name="gateway" placeholder="10.1.0.1"></label>
        <label>Description <input name="description" placeholder="Server VLAN"></label>
        <label>Utilization % <input name="utilization_pct" type="number" value="0" min="0" max="100"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Save</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>
function submitBlock(e){e.preventDefault();const fd=new FormData(e.target),d={};fd.forEach((v,k)=>d[k]=v);
  d.vlan_id=parseInt(d.vlan_id)||null;d.utilization_pct=parseFloat(d.utilization_pct)||0;
  fetch(NC_BASE+'/api/ipam',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(d)}).then(r=>{if(r.ok)location.reload();});return false;}
function editBlock(id,net,vlan,vrf,gw,desc,util){
  const n=prompt('Network (CIDR):',net);if(n===null)return;
  const v=prompt('VLAN ID:',vlan);
  const g=prompt('Gateway:',gw);
  const d=prompt('Description:',desc);
  const u=prompt('Utilization %:',util);
  fetch(NC_BASE+'/api/ipam/'+id,{method:'PUT',headers:{'Content-Type':'application/json'},
    body:JSON.stringify({network:n,vlan_id:parseInt(v)||null,gateway:g,description:d,utilization_pct:parseFloat(u)||0})}).then(()=>location.reload());
}
function delBlock(id){if(!confirm('Delete this address block?'))return;fetch(NC_BASE+'/api/ipam/'+id,{method:'DELETE'}).then(()=>location.reload());}
function filterByProject(pid){
  if(pid) window.location.href=NC_BASE+'/ipam?project='+pid;
  else window.location.href=NC_BASE+'/ipam';
}
</script>
{% endblock %}