(async function () {
  const fetched = await fetch("https://loc.sh/int/directory");
  const data = await fetched.json();
  const table = document.getElementById("directory");

  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}`;
    const fetched2 = await fetch(
      `https://loc.sh/int/directory?id=${info.userID}`
    );
    const user = await fetched2.json();
    if (!user.staff) continue;

    const row = table.insertRow();
    let name = `<strong>${user.username}</strong>`;
    row.insertCell().innerHTML = `<img src="${user.avatarURL}" alt="${user.username}" style="width:30px;height:30px;"> ${name} ${info.isManager ? " <abbr title='Play Caller/Managing Partner'>[k]</abbr>" : ""}`;

    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>  `
      : "";

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