async function me() {
    try {
        const response = await fetch("/me");
        if (response.ok) {
            const result = await response.json();
            // this is technically a XSS risk (TODO: deal with it)
            // in principle it only affects the person who chose their username, but...
            document.getElementById("logged-in").innerHTML = `Logged in as ${result.username}`;
            document.getElementById("logout-links").hidden = false;
        } else {
            document.getElementById("login-links").hidden = false;
        }
    } catch (error) {
        console.log("hi");
    }
}

async function logout() {
    const response = await fetch("/logout", {method: "post"});
    window.location.reload();
}

function create_problem_element(problem, submissions) {
    const problem_div = document.createElement("div");
    problem_div.className = "problem";
                 
    const title = document.createElement("h2");
    title.innerHTML = problem.title;
    problem_div.appendChild(title);

    const description = document.createElement("p");
    description.innerHTML = problem.description;
    problem_div.appendChild(description);

    const sub_title = document.createElement("h3");
    sub_title.innerHTML = "Submissions";
    problem_div.appendChild(sub_title);
    
    const sub_div = document.createElement("div");
    sub_div.className = "submission-div";
    problem_div.appendChild(sub_div);
    
    const sub_table = document.createElement("table");
    sub_table.className = "submission-table";
    sub_div.appendChild(sub_table);
    
    const header_row = document.createElement("tr");
    sub_table.appendChild(header_row);
    
    const header_user = document.createElement("th");
    header_user.innerHTML = "User";
    header_row.appendChild(header_user);
    const header_lang = document.createElement("th");
    header_lang.innerHTML = "Language";
    header_row.appendChild(header_lang);
    const header_size = document.createElement("th");
    header_size.innerHTML = "Size";
    header_row.appendChild(header_size);
    const header_subm = document.createElement("th");
    header_subm.innerHTML = "Submission";
    header_row.appendChild(header_subm);
    
    for (const submission of submissions) {
        const sub_row = document.createElement("tr");
        sub_table.appendChild(sub_row);
    
        const sub_user = document.createElement("td");
        sub_user.innerHTML = "Username";
        sub_row.appendChild(sub_user);
        
        const sub_lang = document.createElement("td");
        sub_lang.innerHTML = "Language";
        sub_row.appendChild(sub_lang);
        
        const sub_size = document.createElement("td");
        sub_size.innerHTML = "Size";
        sub_row.appendChild(sub_size);

        const sub_subm = document.createElement("td");
        const sub_anch = document.createElement("a");
        sub_anch.href = "submission.html?id=5";
        sub_anch.innerText = "view submission";
        sub_subm.appendChild(sub_anch);
        sub_row.appendChild(sub_subm);
    }
    
    return problem_div
}

async function fetch_problems() {
    const response = await fetch("/problem");
    if (!response.ok) {
        console.log("ummm");
    }

    const result = await response.json();

    const problems_div = document.getElementById("problems");
    while (problems_div.firstChild) {
        problems_div.removeChild(problems_div.lastChild);
    }

    for (const problem of result) {
        const problem_div = create_problem_element(problem, [1, 2, 3])
        problems_div.appendChild(problem_div);
    }
}

async function on_load() {
    await me();
    await fetch_problems();
}