teamContainer = document.getElementById("teamContainer");

function ucFirst(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

fetch('/json/team.json')
  .then((response) => response.json())
  .then((json) => {
    json.ranks.forEach((rank) => {
      const rankTitle = document.createElement("h2");
      rankTitle.innerHTML = ucFirst(rank.name);
      teamContainer.appendChild(rankTitle);

      const membersContainer = document.createElement("div");
      membersContainer.classList.add("flex", "flex-row", "ranks", "-"+rank.name+"");
      rank.members.forEach((member) => {
        const memberContainer = document.createElement("div");
        memberContainer.id = member.uid
        memberContainer.classList.add("flex", "flex-row", "playerbox", "ml-4", "pr-5", "pt-4");

        const memberImageContainer = document.createElement("div");
        memberImageContainer.classList.add("mx-6");

        const memberImage = document.createElement("img");
        memberImage.src = "https://crafatar.com/renders/body/"+member.uid+"?overlay&scale=5";
        memberImage.alt = member.name;
        memberImage.classList.add("playerimage", "w-16");

        memberImageContainer.appendChild(memberImage);

        const descriptionContainer = document.createElement("div");
        descriptionContainer.id = "description";
        descriptionContainer.classList.add("flex", "flex-col", "text-center");

        const memberName = document.createElement("p");
        memberName.innerHTML = "<b>"+member.name+"</b>"

        const memberLocation = document.createElement("p");
        memberLocation.innerHTML = "<b>Location: </b><img src='https://flagsapi.com/"+member.loc+"/flat/32.png' alt=''></img>"

        const memberLanguages = document.createElement("p")
        memberLanguages.innerHTML = "<b>Languages: </b>"

        member.lang.forEach((spokenLang) => {
          const memberLang = document.createElement("img");
          memberLang.src = "https://flagsapi.com/"+spokenLang+"/flat/32.png";
          memberLang.alt = "";
          memberLanguages.appendChild(memberLang);
        });

        descriptionContainer.appendChild(memberName);
        descriptionContainer.appendChild(memberLocation);
        descriptionContainer.appendChild(memberLanguages);

        memberContainer.appendChild(memberImageContainer);
        memberContainer.appendChild(descriptionContainer);

        membersContainer.appendChild(memberContainer);
      });
      teamContainer.appendChild(membersContainer);
    });
  });