let personer = [
    {navn: "Ole", alder: 23},
    {navn: "Kim", alder: 43},
    {navn: "Frank", alder: 2},
    {navn: "Kim", alder: 12},
    {navn: "Huggo", alder: 20}
];

async function GET(url) {
    const OK = 200;
    let response = await fetch(url);
    if (response.status !== OK)
        throw new Error("GET status code " + response.status);
    return await response.text();
};

async function generateHTML(data) {
    let template = await GET('/index.hbs');
    let compiledTemplate = Handlebars.compile(template);
    return compiledTemplate({ data });
};

function sum() {
    let tempSum = 0;
    let rows = document.querySelectorAll("tr");
    for(let row of rows){
        tempSum += Number.parseInt(row.cells[1].innerHTML);
    }
    let diven = document.querySelector("#diven");
    diven.innerHTML = "Sum: " + tempSum;
};

/* Tunger at udfører men meget mere simpel
function sum() {
    let tdElements = document.querySelectorAll('td');
    let tempSum = 0;
    for(let i = 0; i < tdElements.length; i++) {
        if(i % 2 == 1) {
            tempSum += Number.parseInt(tdElements[i].innerHTML.trim());
        }
    }
    let diven = document.querySelector("#diven");
    diven.innerHTML = "Sum: " + tempSum;
};
 */

function removeElement(event) {
    let e = event.target;
    e.parentNode.parentNode.removeChild(e.parentNode);
    sum();
};

function setOnclick() {
    let rows = document.querySelectorAll("tr");
    for(let i of rows){
        i.onclick = removeElement;
    }
}

async function main() {
    try {
        let html = await generateHTML(personer);
        document.body.innerHTML = html;
        setOnclick();
        sum();
    } catch (e) {
        console.log(e.name + ": " + e.message);
    }
};

main();