{{define "title"}}About Inbucket{{end}}

{{define "script"}}
<script src="/public/jquery.sparkline.min.js" type="text/javascript" charset="utf-8"></script>
<script>
  jQuery.ajaxSetup({ cache: false })
  flashOn = jQuery.Color("rgba(255,255,0,1)")
  flashOff = jQuery.Color("rgba(255,255,0,0)")
  dataHist = new Object()

  function timeFilter(seconds) {
    if (seconds < 60) {
      return seconds + " seconds"
      } else if (seconds < 3600) {
      return (seconds/60).toFixed(0) + " minute(s)"
      } else if (seconds < 86400) {
      return (seconds/3600).toFixed(1) + " hour(s)"
    }
    return (seconds/86400).toFixed(0) + " day(s)"
  }

  function sizeFilter(bytes) {
    if (bytes < 1024) {
      return bytes + " bytes"
      } else if (bytes < 1048576) {
      return (bytes/1024).toFixed(0) + " KB"
      } else if (bytes < 1073741824) {
      return (bytes/1048576).toFixed(2) + " MB"
    }
    return (bytes/1073741824).toFixed(2) + " GB"
  }

  function numberFilter(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
  }

  function appendHistory(name, value) {
    var h = dataHist[name]
    if (! h) {
      h = new Array(0)
    }
    // Prevent array from growing
    if (h.length >= 50) {
      h = h.slice(1,50)
    }
    h.push(parseInt(value))
    dataHist[name] = h
    el = $('#s-' + name)
    if (el) {
      el.sparkline(dataHist[name])
    }
  }

  function metric(name, value, filter, chartable) {
    if (chartable) {
      appendHistory(name, value)
    }
    if (filter) {
      value = filter(value)
    }
    var el = $('#m-' + name)
    if (el.text() != value) {
      el.text(value)
      el.css('background-color', flashOn)
      el.animate({ backgroundColor: flashOff }, 1500)
    }
  }

  function displayMetrics(data, textStatus, jqXHR) {
    metric('uptime', data.uptime, timeFilter, false)
    metric('memstatsSys', data.memstats.Sys, sizeFilter, true)
    metric('memstatsHeapAlloc', data.memstats.HeapAlloc, sizeFilter, true)
    metric('memstatsHeapSys', data.memstats.HeapSys, sizeFilter, true)
    metric('memstatsHeapObjects', data.memstats.HeapObjects, numberFilter, true)
    metric('smtpConnectsTotal', data.smtp.connectsTotal, numberFilter, false)
    metric('smtpConnectsCurrent', data.smtp.connectsCurrent, numberFilter, true)
    metric('smtpDeliveredTotal', data.smtp.deliveredTotal, numberFilter, false)
  }

  function loadMetrics() {
    // jQuery.getJSON( url [, data] [, success(data, textStatus, jqXHR)] )
    jQuery.getJSON('/debug/vars', null, displayMetrics)
  }

  function aboutInit() {
    loadMetrics()
    setInterval(loadMetrics, 5000)
  }

  $(document).ready(aboutInit)
</script>
{{end}}

{{define "menu"}}
<div id="logo">
  <h1><a href="/">inbucket</a></h1>
  <h2>email testing service</h2>
</div>
{{end}}

{{define "content"}}
<h2>About Inbucket</h2>

<p>Inbucket is an email testing service; it will accept email for any email
address and make it available to view without a password.</p>

<div class="box">
  <h3>System Metrics</h3>
  <table class="metrics">
    <tr>
      <th>Uptime:</th>
      <td><span id="m-uptime">.</span></td>
    </tr>
    <tr>
      <th>System Memory:</th>
      <td><span id="m-memstatsSys">.</span></td>
      <td><span id="s-memstatsSys">.</span></td>
    </tr>
    <tr>
      <th>Heap Capacity:</th>
      <td><span id="m-memstatsHeapSys">.</span></td>
      <td><span id="s-memstatsHeapSys">.</span></td>
    </tr>
    <tr>
      <th>Heap In-Use:</th>
      <td><span id="m-memstatsHeapAlloc">.</span></td>
      <td><span id="s-memstatsHeapAlloc">.</span></td>
    </tr>
    <tr>
      <th>Heap # Objects:</th>
      <td><span id="m-memstatsHeapObjects">.</span></td>
      <td><span id="s-memstatsHeapObjects">.</span></td>
    </tr>
  </table>
  <p class="last">&nbsp;</p>
</div>
<div class="box">
  <h3>SMTP Metrics</h3>
  <table class="metrics">
    <tr>
      <th>Current Connections:</th>
      <td><span id="m-smtpConnectsCurrent">.</span></td>
      <td><span id="s-smtpConnectsCurrent">.</span></td>
    </tr>
    <tr>
      <th>Total Connections:</th>
      <td><span id="m-smtpConnectsTotal">.</span></td>
    </tr>
    <tr>
      <th>Messages Delivered:</th>
      <td><span id="m-smtpDeliveredTotal">.</span></td>
    </tr>
  </table>
  <p class="last">&nbsp;</p>
</div>
{{end}}