<div id="main">
    <div class="header">
      <h1>Debug Log</h1>
    </div>

    <div class="content">
      <p>The debug log shows the most recent characters printed by the esp-link software itself to
      its own debug log.</p>
      <div class="pure-g">
        <p class="pure-u-1-4">
          <a id="refresh-button" class="pure-button button-primary" href="#">Refresh</a>
        </p>
        <p class="pure-u-3-4" style="vertical-align: baseline">
          UART debug log:
          <a id="dbg-auto" class="dbg-btn pure-button" href="#">auto</a>
          <a id="dbg-off" class="dbg-btn pure-button" href="#">off</a>
          <a id="dbg-on" class="dbg-btn pure-button" href="#">on</a>
        </p>
      </div>
      <pre id="console" class="console" style="margin-top: 0px;"></pre>
    </div>
  </div>
</div>

<script type="text/javascript">console_url = "/log/text"</script>
<script src="console.js"></script>
<script type="text/javascript">
  onLoad(function() {
    fetchText(100, false);

    $("#refresh-button").addEventListener("click", function(e) {
      e.preventDefault();
      fetchText(100, false);
    });

    ["auto", "off", "on"].forEach(function(mode) {
      bnd($('#dbg-'+mode), "click", function(el) {
        ajaxJsonSpin('POST', "/log/dbg?mode="+mode,
          function(data) { showNotification("UART mode " + data.mode); showDbgMode(data.mode); },
          function(s, st) { showWarning("Error setting UART mode: " + st); }
        );
      });
    });

    ajaxJson('GET', "/log/dbg", function(data) { showDbgMode(data.mode); }, function() {});
  });
</script>
</body></html>