const teamArray = document.getElementById('team-gallery');

function addTeamCard(teamObject) {
    const teamCard = document.createElement('article');
    teamCard.className = "team-card";
    teamCard.id = `team-${teamObject.name}`;
    const teamCardHeader = document.createElement('div')
    teamCardHeader.className = "team-card-header"
    const teamCardTitle = document.createElement('div')
    teamCardTitle.appendChild(Object.assign(document.createElement('h4'), {textContent: teamObject.name}));
    teamCardTitle.appendChild(Object.assign(document.createElement('p'), {innerHTML: teamObject.title}));
    teamCardTitle.appendChild(Object.assign(
        document.createElement('p'),
        {innerHTML: `<a href=${teamObject.website}>Website</a>, <a href=${teamObject.hf_profile}>HF Profile</a>`}
    ));
    const teamCardPicture = document.createElement('img')
    teamCardPicture.src = `${teamObject.picture}`;
    teamCardPicture.style.maxWidth = '100%';
    teamCardHeader.appendChild(teamCardTitle);
    teamCardHeader.appendChild(teamCardPicture);
    teamCard.appendChild(teamCardHeader);
    teamCard.appendChild(Object.assign(document.createElement('p'), {textContent: teamObject.blurb, className: "card-abstract"}));
    const projects = Object.assign(document.createElement('div'), {className: "badges"});
    for (tag of teamObject.projects) {
        projects.appendChild(Object.assign(document.createElement('span'), {className: `badge ${tag}`, textContent: tag}));
    }
    teamCard.appendChild(projects);
    teamArray.appendChild(teamCard);
}

for (teamName of team) {
    fetchAndParseYAML(`resources/team/${teamName}.yaml`, addTeamCard);
}