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();
}

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 = document.createElement("div");
        problem_div.className = "problem";
        problems_div.appendChild(problem_div);
                 
        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);
    }
}

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