{{define "title"}}Inbucket Monitor{{end}}

{{define "script"}}
<script src="/public/monitor.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function () {
  $('#nav-monitor').addClass('active');
  startMonitor();
});
</script>
<script type="text/html" id="message-template">
  <tr data-href="href" onclick="messageClick(this);">
    <td data-content="date" data-format="date"/>
    <td data-content-text="from"/>
    <td data-content-text="mailbox"/>
    <td data-content-text="subject" data-format="subject"/>
  </tr>
</script>
{{end}}

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

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

<div class="pull-right">
  <button class="btn btn-primary" onclick="clearClick();">Clear</button>
</div>

<p class="small">Messages will be listed here shortly after delivery.</p>

<div class="table-responsive clearfix">
  <table class="table table-condensed table-hover">
    <thead>
      <tr>
        <th>Date</th>
        <th>From</th>
        <th>Mailbox</th>
        <th>Subject</th>
      </tr>
    </thead>
    <tbody id="monitor-message-list"></tbody>
  </table>
</div>

<div id="conn-status">Connecting...</div>
{{end}}