<h2>System Status Checks</h2>

<style>
#system-checks .heading td {
  font-weight: bold;
  font-size: 120%;
  padding-top: 1.5em;
}
#system-checks .heading.first td {
  border-top: none;
  padding-top: 0;
}
#system-checks .status-error td {
  color: #733;
}
#system-checks .status-warning td {
  color: #770;
}
#system-checks .status-ok td {
  color: #040;
}
#system-checks div.extra {
  display: none;
  margin-top: 1em;
  max-width: 50em;
  word-wrap: break-word;
}
#system-checks a.showhide {
  display: none;
  font-size: 85%;
}
#system-checks .pre {
  margin: 1em;
  font-family: monospace;
  white-space: pre-wrap;
}

#system-privacy-setting {
  float: right;
  max-width: 20em;
  margin-bottom: 1em;
}
</style>

<div id="system-privacy-setting" style="display: none">
	<div><a onclick="return enable_privacy(!current_privacy_setting)" href="#"><span>Enable/Disable</span> New-Version Check</a></div>
	<p style="line-height: 125%"><small>(When enabled, status checks phone-home to check for a new release of Mail-in-a-Box.)</small></p>
</div>


<table id="system-checks" class="table" style="max-width: 60em">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

<script>
function show_system_status() {
  $('#system-checks tbody').html("<tr><td colspan='2' class='text-muted'>Loading...</td></tr>")

  api(
    "/system/privacy",
    "GET",
    { },
    function(r) {
      current_privacy_setting = r;
      $('#system-privacy-setting').show();
      $('#system-privacy-setting a span').text(r ? "Enable" : "Disable");
      $('#system-privacy-setting p').toggle(r);
    });

  api(
    "/system/status",
    "POST",
    { },
    function(r) {
      $('#system-checks tbody').html("");
      for (var i = 0; i < r.length; i++) {
        var n = $("<tr><td class='status'/><td class='message'><p style='margin: 0'/><div class='extra'/><a class='showhide' href='#'/></tr>");
        if (i == 0) n.addClass('first')
        if (r[i].type == "heading")
                n.addClass(r[i].type)
        else
                n.addClass("status-" + r[i].type)
        if (r[i].type == "ok") n.find('td.status').text("✓")
        if (r[i].type == "error") n.find('td.status').text("✖")
        if (r[i].type == "warning") n.find('td.status').text("?")
        n.find('td.message p').text(r[i].text)
        $('#system-checks tbody').append(n);

        if (r[i].extra.length > 0) {
          n.find('a.showhide').show().text("show more").click(function() {
            $(this).hide();
            $(this).parent().find('.extra').fadeIn();
            return false;
          });
        }

        for (var j = 0; j < r[i].extra.length; j++) {

          var m = $("<div/>").text(r[i].extra[j].text)
          if (r[i].extra[j].monospace)
            m.addClass("pre");
          n.find('> td.message > div').append(m);
        }
      }
    })

}

var current_privacy_setting = null;
function enable_privacy(status) {
  api(
    "/system/privacy",
    "POST",
    {
      value: (status ? "private" : "off")
    },
    function(res) {
      show_system_status();
    });
  return false; // disable link
}
</script>