function render_problems() {
    $.post("/api/problem/data", {
    }, function(data) {
        data = data["data"];
        for (var i = 0; i < data.length; i++) {
            files = data[i]["files"];
            problem =
`<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title">` + data[i]["name"] + ` | ` + data[i]["category"] + `<span style="float: right">` + data[i]["value"] + ` points</span></h3>
    </div>
    <div class="panel-body">
       <p>` + data[i]["description"]  + `</p>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Flag">
            <span class="input-group-btn">
                <button class="btn btn-success" id="hint" type="button" onclick="show_hint(\'` + data[i]["pid"] + `\');">Hint</button>
                <button class="btn btn-success" type="button">Submit!</button>
            </span>
        </div>
    </div>
    <div class="panel-footer">`

            for (var j = 0; j < files.length; j++) {
                file_name = files[j].split("/").pop();
                problem +=
`<a href="` + files[j] + `" class="filelink" target="_blank">
    <h4 class="probfile">` + file_name + `</h4>
</a>`
            }

            problem += `<br>
        <div id="hint_` + data[i]["pid"] + `" style="display:none">` + data[i]["hint"] + `</div>
</div></div>`
            $("#problems").append(problem);
        }
    });
}

function show_hint(pid) {
    $("#hint_" + pid).slideToggle(120, "swing");
}

$(document).ready( render_problems() );