{{template "head.html" .Global}}
{{template "nav.html" .Global}}

<!-- TODO: Share tabs if reasonable -->
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 header-tabbed">
      <h2>{{.Mailbox.Name}}</h2>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a
            class="nav-link active"
            href="/mailbox/{{.Mailbox.Name | pathescape }}"
          >Messages</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/compose">Compose</a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="container-fluid mailbox-container">
  <div class="row">
    <div class="col-md-2 mailboxes-column">
      <ul class="nav flex-column">
        {{$current := .Mailbox }}
        {{range .Mailboxes}}
          <li class="nav-item">
            <a
              {{ if eq $current.Name .Name }}
              class="nav-link active"
              {{ else }}
              class="nav-link"
              {{ end }}
              href="/mailbox/{{.Name | pathescape}}"
            >{{.Name}}</a>
          </li>
        {{end}}
      </ul>
    </div>
    <div class="col-md-10 messages-column">
      <div class="nav flex-column">
        <form method="get" action="">
          <input type="text" name="query" value="{{.Query}}"
            class="form-control" placeholder="Search" autofocus>
        </form>
      </div>

      {{if .Messages}}
      <ul class="nav flex-column">
        {{range .Messages}}
          <li class="nav-item">
            <a
              class="nav-link"
              href="{{.TextPart.URL false}}"
            >
            <span class="text-muted date">
              {{ .Envelope.Date | formatdate }}
            </span>
            <span class="text-normal from">
              {{ range .Envelope.From }}
                {{ .PersonalName }}
              {{ end }}
            </span>
            <span class="{{if not (.HasFlag "\\Seen")}}font-weight-bold{{end}}">
              {{if .Envelope.Subject}}
                {{.Envelope.Subject}}
              {{else}}
                (No subject)
              {{end}}
            </span>
          </a></li>
        {{end}}
      </ul>

      <p>
        {{if ge .PrevPage 0}}
          <a href="?page={{.PrevPage}}">Prev</a>
        {{end}}
        {{if and (ge .PrevPage 0) (ge .NextPage 0)}}·{{end}}
        {{if ge .NextPage 0}}
          <a href="?page={{.NextPage}}">Next</a>
        {{end}}
      </p>
      {{else}}
        <p>No message.</p>
      {{end}}
    </div>
  </div>
</div>

{{template "foot.html"}}