// Function to load subnets in the sidebar
function loadSubnets() {
  fetch('/api/subnets')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      // Update the sidebar with the fetched subnets
      const subnetList = document.getElementById('subnet-list');
      subnetList.innerHTML = ''; // Clear existing items

      if (data.length === 0) {
        subnetList.innerHTML = '<div class="nav-item"><span class="nav-link">No subnets found</span></div>';
        return;
      }

      data.forEach(site => {
        // Create site header if it has subnets
        if (site.subnets && site.subnets.length > 0) {
          const siteHeader = document.createElement('div');
          siteHeader.className = 'nav-item';
          siteHeader.innerHTML = `<span class="nav-link text-muted">${site.name || 'Unassigned'}</span>`;
          subnetList.appendChild(siteHeader);

          // Add each subnet under this site
          site.subnets.forEach(subnet => {
            const subnetItem = document.createElement('div');
            subnetItem.className = 'nav-item';
            subnetItem.innerHTML = `
                            <a href="/ipam/subnet/${subnet.id}" class="nav-link">
                                <span class="nav-link-icon">
                                    <i class="ti ti-network"></i>
                                </span>
                                <span>${subnet.cidr}</span>
                            </a>
                        `;
            subnetList.appendChild(subnetItem);
          });
        }
      });
    })
    .catch(error => {
      console.error('Error loading subnets:', error);
      const subnetList = document.getElementById('subnet-list');
      subnetList.innerHTML = '<div class="nav-item text-danger">Error loading subnets</div>';
    });
}

// Call this function when the page loads
document.addEventListener('DOMContentLoaded', loadSubnets);