const projects = [
    "policy",
    "environment",
    "evaluation",
    "legal",
    "data",
];

const topics = [
    "understanding",
    "developing",
    "deciding",
    "shaping",
    "environment",
    "systems",
    "individuals",
    "discussing",
];

const team = [
    "yacine",
    "sasha",
    "irene",
    "giada",
    "avijit",
    "lucie",
]

function fetchAndParseYAML(filePath, callback) {
    fetch(filePath)
     .then(response => response.text())
     .then(yamlText => {
        const yamlData = jsyaml.load(yamlText);
        callback(yamlData); // Pass the parsed YAML data to your callback
      })
     .catch(error => console.error('Error fetching or parsing YAML:', error));
  }

  function renderDocument(documentObject) {
    let projectName = documentObject["document-id"];

    for (nli of navbarListItems) {
        if (nli.id === `navbar-top-${projectName}`) {
            nli.style.backgroundColor = "#b8c8c0";
        } else {
            nli.style.backgroundColor  = "#cbf5e1";
        }
    }

    documentText.innerHTML = "";
    documentSidebar.innerHTML = "";

    documentText.appendChild(Object.assign(document.createElement('h3'), {innerHTML: documentObject["title-long"]}));
    documentText.appendChild(Object.assign(document.createElement('section'), {innerHTML: documentObject["introduction"]}));

    for (section of documentObject.sections) {
        documentSidebar.appendChild(Object.assign(document.createElement('li'), {innerHTML: section["section-title"]}));
        documentText.appendChild(Object.assign(document.createElement('h4'), {innerHTML: section["section-title"]}));
        documentText.appendChild(Object.assign(document.createElement('section'), {innerHTML: section["section-text"]}));
    }
    documentSidebar.appendChild(Object.assign(document.createElement('li'), {innerHTML: "Resources"}));

    documentText.appendChild(Object.assign(document.createElement('h3'), {innerHTML: "Resources"}));
    const resourceList = document.createElement('ul');
    for (resource of documentObject.resources){
        resourceList.appendChild(
            Object.assign(
                document.createElement('li'),
                {innerHTML: `<a href="${resource['resource-url']}">${resource['resource-name']}</a>`}
            )
        );
    }
    documentText.appendChild(resourceList);

    documentCredit.innerHTML = `<p style="margin: 0px">${documentObject.contributions}</p>`   
}