window.loadInfrastructure = async function(){

    const resources = window.resources || []
    const mappings = await api(API + "/domainmap")
    const subs = await api(API + "/subdomains")

    const container = document.getElementById("infraView")
    container.innerHTML = ""

    const formatSubdomainName = (subdomain, domainName) => {
        if(!subdomain) return domainName || ""
        if(!domainName) return subdomain

        return subdomain.endsWith("." + domainName) || subdomain === domainName
            ? subdomain
            : subdomain + "." + domainName
    }

    resources.forEach(r => {

        let html = `
           <div class="infra-server clickable"
             onclick='openServerDetail(${JSON.stringify(r)})'>
             <b>${r.name}</b>
           </div>
        `

        if(Array.isArray(r.ips)){

            r.ips.forEach(ip => {

                html += `<div class="infra-ip">└ ${ip.ip}</div>`

                const domains = mappings.filter(m =>
                    m.resource_id == r.id && m.ip_address == ip.ip
                )

                domains.forEach(d => {

                    html += `
                      <div class="infra-domain clickable"
                      onclick='openDomainEdit(${JSON.stringify(d)})'>
                      🌐 ${d.domain_name}
                      </div>
                    `
                    const sublist = subs.filter(s =>
                        s.domain_id == d.domain_id || s.domain_name == d.domain_name
                    )

                    sublist.forEach(s => {

                        if(s.ip_address == ip.ip){

                            html += `
                              <div class="infra-sub clickable"
                                onclick='openSubEdit(${JSON.stringify(s)})'>
                                ↳ ${formatSubdomainName(s.subdomain, s.domain_name)}
                              </div>
                            `

                        }

                    })

                })

            })

        }

        container.innerHTML += html

    })

}