{{template "header.html" .}}
{{$name := .name}}
<script>
  $(document).ready(function() {
    $('.listEntry').hover(
      function() {
	$(this).addClass("listEntryHover")
      },
      function() {
	$(this).removeClass("listEntryHover")
      }
    ).click(
      function() {
	$('.listEntry').removeClass("listEntrySelected")
	$(this).addClass("listEntrySelected")
	$('#emailContent').load('/mailbox/show/{{$name}}/' + this.id)
      }
    )
  });
</script>

<div id="colOne">
  <div id="logo">
    <h1><a href="#">inbucket</a></h1>
    <h2>mail for {{.name}}</h2>
  </div>

  {{range .messages}}
  <div class="box listEntry" id="{{.Id}}">
    <div class="subject">{{/*<a href="/mailbox/show/{{$name}}/{{.Id}}">*/}}{{.Subject}}</div>
    <div class="from">{{.From}}</div>
    <div class="date">{{.Date}}</div>
  </div>
  {{else}}
  <div class="box">
    <p style="height: 30px; padding-left: 10px;">No messages!</p>
  </div>
  {{end}}
</div>

<div id="colTwo">
  <div id="emailContent">
    <p>Select a message at left, or enter a different username into the box on upper right.</p>
  </div>
</div>

{{template "footer.html" .}}