(async function() {
  const fetched = await fetch('https://loc.sh/int/directory');
  //const fetched = await fetch('http://localhost:3890/int/directory');
  const data = await fetched.json();
  const table = document.getElementById('directory');
  const table2 = document.getElementById('roles');
  // users.sort((a, b) => a.firstname.localeCompare(b.firstname))
  let completed = 0;
  document.getElementById('loading').innerText += ` ${completed}/${data.length - 1}`
  for (const info of data.sort((a, b) => a.name.localeCompare(b.name))) {
    completed++;
    document.getElementById('loading').innerText = `Loading... | ${completed}/${data.length}`;
    // console.log(info);
    const fetched2 = await fetch(`https://loc.sh/int/directory?id=${info.userID}`);
    //const fetched2 = await fetch(`http://localhost:3890/int/directory?id=${info.userID}`);
    const user = await fetched2.json();
    // console.log(user);
    if (!user.staff) continue;
    const row = table.insertRow();
    const row2 = table2.insertRow();
    let name = `<strong>${user.username}</strong>`;
    let pn = [];
    if (info.pn && info.pn.length > 0) {
      for (const nominal of info.pn) {
        pn.push(`<abbr title="${getAbbreviations().get(nominal)}">${nominal}</abbr>`)
      }
      name += `, ${pn.join(', ')}`;
    }
    row.insertCell().innerHTML = `<img src="${user.avatarURL}" alt="${user.username}" style="width:30px;height:30px;"> ${name}`;
    // row.insertCell().innerText = `${info.userID} | #${user.discriminator}`;
    let departmentAndTitle = '';
    if (info.title && info.dept) {
      departmentAndTitle += `${info.title}, ${info.dept}`;
    } else if (info.dept) {
      departmentAndTitle += info.dept;
    }
    row.insertCell().innerText = departmentAndTitle;
    row.insertCell().innerHTML = info.emailAddress ? `<a href="mailto:${info.emailAddress}">${info.emailAddress}</a>  ` : '';
    row.insertCell().innerText = user.pager ? user.pager : '';
    row.insertCell().innerText = info.extension ? info.extension : '';

    row2.insertCell().innerHTML = `${name}`;
    let rankings = '<ul>';
    if (info.additionalRoles && info.additionalRoles.length > 0) {
      for (const rank of info.additionalRoles) {
      rankings += `<li>${rank}</li>`
    }
      rankings += '</ul>';
    } else {
      rankings = '';
    }
    row2.insertCell().innerHTML = rankings;
  }
  document.getElementById('loading').style.display = "none";
  document.getElementById('directory').style.display = "block";
})();