async function loadResources(){

    const resources = await api(API + "/resources/active");
    const mappings = await api(API + "/domainmap");

    const table = document.getElementById("resources");
    table.innerHTML = "";

    resources.forEach(r => {

        let ips = "";

        if(Array.isArray(r.ips)){
            ips = r.ips.map(ip =>
                "<span class='ip'>" + (ip.type || "") + " " + ip.ip + "</span>"
            ).join("");
        }

        let domains = mappings
            .filter(m => m.resource_id == r.id)
            .map(m => "<span class='ip'>🌐 " + m.domain_name + "</span>")
            .join("");

        const tr = document.createElement("tr");

        tr.innerHTML = `
        <td>${r.name}</td>
        <td>${r.produkt || ""}</td>
        <td><span class="provider">${r.provider || ""}</span></td>
        <td id="status-${r.id}">...</td>

        <td>
        <div class="system">
        ${r.cpu ? r.cpu + " CPU" : ""}
        ${r.ram ? " • " + r.ram + " RAM" : ""}
        ${r.disk ? " • " + r.disk : ""}
        ${r.os ? " • " + r.os : ""}
        </div>
        </td>

        <td>${domains}</td>

        <td>
        ${ips}
        </td>

        <td>
        <button onclick="deleteResource(${r.id})">Delete</button>
        </td>
        `;

        table.appendChild(tr);

    });

}

loadResources();