function check(id) {
  let checkbox = $("#task-" + id);
  let uri = "/v1/undo";
  if (checkbox.prop("checked")) {
    uri = "/v1/do";
  }
  $.post(uri, {api_key: API_KEY, id: id}, function(data, status) {
    if (status == "success") {
      checkbox.prop("checked", data.task.done);
    } else {
      console.log(data); // NOTE TEMPORARY (need to handle errors better)
    }
  });
}

function new_task() {
  let input = $("#new-task-input");
  $.post("/v1/new", {api_key: API_KEY, content: input.prop("value")}, function(data, status) {
    if (status == "success") {
      $("#new-task").before("<li><input type='checkbox' id='task-" + data.task.id + "' onchange='check(" + data.task.id + ")'> " + data.task.content + "</li>");
    } else {
      console.log(data); // NOTE TEMPORARY (need to handle errors better)
    }
  });
  input.prop("value", "");
  return false; // prevent form submission
}

function new_api_key() {
  $.get("/new-api-key", function(data, status) {
    if (status == "success") {
      let template = $("#api-key-template").html();
      $("code", template).text(data.api_key.key);
      $("#new-api-key").before(template);
      // $("#new-api-key").before("<li><div class='row'><div class='column column-80'><code>" + data.api_key.key + "</code></div><div class='column column-20'><button class='delete'>x</button></div></div></li>");
    } else {
      console.log(data); // NOTE TEMPORARY (need to handle errors better)
    }
  });
}