{% extends "base.html" %}
{% block title %}Assets — Organization{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-server" aria-hidden="true"></i> Linked assets</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-secondary btn-sm" href="{{ url_for('organization_networks_page') }}"><i class="fas fa-network-wired"></i> Networks</a>
  </div>
</div>
<div id="out" class="filters-section" style="padding:12px;"><div class="loading-state"><div class="spinner"></div><span>Loading…</span></div></div>
<script>
(function(){
  var networks = [];
  var canWrite = true;

  function esc(s){ return String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;'); }

  function vlanOptions(asset){
    var html = '<option value="">— None —</option>';
    networks.forEach(function(n){
      var group = esc(n.name) + (n.cidr ? ' · ' + esc(n.cidr) : '');
      var parentSel = (asset.network_id === n.id && !asset.vlan_id) ? ' selected' : '';
      var opts = '<option value="n:' + n.id + '"' + parentSel + '>' + esc(n.name) + ' (untagged)</option>';
      (n.vlans || []).forEach(function(v){
        var tag = v.vlan_id == null ? 'untagged' : 'VLAN ' + v.vlan_id;
        var sel = asset.vlan_id === v.id ? ' selected' : '';
        opts += '<option value="v:' + v.id + '"' + sel + '>' + esc(v.name) + ' · ' + tag + (v.cidr ? ' · ' + esc(v.cidr) : '') + '</option>';
      });
      html += '<optgroup label="' + group + '">' + opts + '</optgroup>';
    });
    return html;
  }

  window.portalAssignAssetNetwork = async function(assetId, value){
    var payload;
    if (!value) payload = { network_id: null };
    else if (value.indexOf('v:') === 0) payload = { vlan_id: Number(value.slice(2)) };
    else payload = { network_id: Number(value.slice(2)), vlan_id: null };
    try {
      var r = await fetch('/api/portal/organization/assets/' + assetId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      var j = await r.json().catch(function(){ return {}; });
      if (!r.ok || j.success === false) alert((j && j.error) || 'Failed to update asset');
    } catch(e) {
      alert('Failed to update asset: ' + e.message);
    }
    load();
  };

  async function load(){
    var el = document.getElementById('out');
    try {
      var assetsRes = await fetch('/api/portal/organization/assets');
      var assetsJson = await assetsRes.json();
      if (!assetsJson.success) { el.textContent = assetsJson.error || 'Failed'; return; }
      try {
        var netsRes = await fetch('/api/portal/organization/networks?include=vlans');
        var netsJson = await netsRes.json();
        networks = (netsJson && netsJson.networks) || [];
      } catch(e) { networks = []; }
      var rows = (assetsJson.assets || []).map(function(a){
        var netCell;
        if (networks.length && canWrite) {
          netCell = '<select onchange="portalAssignAssetNetwork(' + a.id + ', this.value)" style="max-width:230px;">' + vlanOptions(a) + '</select>';
        } else {
          netCell = esc(a.vlan_label || (a.network_id ? 'Network #' + a.network_id : '—'));
        }
        return '<tr><td>' + a.id + '</td><td>' + esc(a.name || '') + '</td><td>' + esc(a.ip || '') + '</td><td>' + esc(a.category || '') + '</td><td>' + netCell + '</td></tr>';
      }).join('');
      el.innerHTML = '<div class="table-container"><table class="client-table-simple"><thead><tr><th>ID</th><th>Name</th><th>IP</th><th>Category</th><th>Network / VLAN</th></tr></thead><tbody>' + (rows || '<tr><td colspan="5">None</td></tr>') + '</tbody></table></div>';
    } catch(e) {
      el.textContent = 'Failed to load assets: ' + e.message;
    }
  }

  load();
})();
</script>
{% endblock %}