{{define "title"}}{{if .CurrentBox}}{{.CurrentBox.Name}}{{else}}Mail{{end}}{{end}}
{{define "content"}}
<!-- Toolbar -->
<div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
  <span style="font-weight:600;color:#f9fafb;font-size:.875rem">{{if .CurrentBox}}{{.CurrentBox.Name}}{{end}}</span>
  <span style="color:#4b5563;font-size:.75rem;margin-left:.25rem">{{.TotalCount}} messages</span>
  <div style="flex:1"></div>
  <!-- Search -->
  <form method="GET" style="display:flex;gap:.375rem">
    <input type="hidden" name="boxid" value="{{if .CurrentBox}}{{.CurrentBox.ID}}{{end}}">
    <input type="search" name="q" value="{{.Query}}" placeholder="Search..." style="width:200px;font-size:.75rem;padding:.25rem .5rem">
    <button type="submit" class="btn btn-ghost btn-sm">Search</button>
    {{if .Query}}<a href="/mail/{{if .CurrentBox}}{{.CurrentBox.ID}}{{end}}" class="btn btn-ghost btn-sm">Clear</a>{{end}}
  </form>
  {{if .CurrentBox}}
  <form method="POST" action="/mail/{{.CurrentBox.ID}}/expunge">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <button type="submit" class="btn btn-ghost btn-sm" onclick="return confirm('Permanently delete all messages marked for deletion?')">Expunge</button>
  </form>
  {{end}}
</div>

<!-- Message list -->
<div style="flex:1;overflow-y:auto">
  {{if .Messages}}
  {{range .Messages}}
  <a href="/mail/{{$.CurrentBox.ID}}/{{.UID}}" style="text-decoration:none;color:inherit;display:block"
     class="msg-row {{if not .IsRead}}unread{{end}}">
    <!-- Star -->
    <form method="POST" action="/mail/{{$.CurrentBox.ID}}/{{.UID}}/flag" style="display:contents">
      <input type="hidden" name="_csrf" value="{{$.CSRF}}">
      <input type="hidden" name="flag" value="star">
      <input type="hidden" name="return" value="/mail/{{$.CurrentBox.ID}}">
      <button type="submit" style="background:none;border:none;cursor:pointer;padding:0;font-size:.875rem;color:{{if .IsStarred}}#eab308{{else}}#374151{{end}}">
        {{if .IsStarred}}*{{else}}.{{end}}
      </button>
    </form>
    <!-- From + Subject -->
    <div style="min-width:0">
      <div class="msg-from">{{if .FromName}}{{truncate .FromName 30}}{{else}}{{.FromEmail}}{{end}}</div>
      <div class="msg-subject">{{if .Subject}}{{truncate .Subject 80}}{{else}}(no subject){{end}}</div>
    </div>
    <!-- Attachments + Date -->
    <div style="display:flex;align-items:center;gap:.375rem">
      {{if .HasAttachment}}<span class="tag tag-gray" style="font-size:.6rem">att</span>{{end}}
    </div>
    <div class="msg-date">{{shortDate .Date}}</div>
  </a>
  {{end}}

  <!-- Pagination -->
  <div style="display:flex;justify-content:space-between;padding:.625rem .875rem;border-top:1px solid #1f2937">
    {{if .PrevPage}}
    <a href="/mail/{{.CurrentBox.ID}}?before={{.PrevPage}}" class="btn btn-ghost btn-sm">Newer</a>
    {{else}}<span></span>{{end}}
    {{if .NextPage}}
    <a href="/mail/{{.CurrentBox.ID}}?before={{.NextPage}}" class="btn btn-ghost btn-sm">Older</a>
    {{end}}
  </div>

  {{else}}
  <div style="display:flex;align-items:center;justify-content:center;height:60%;color:#374151;flex-direction:column;gap:.5rem">
    <div style="font-size:.875rem">{{if .Query}}No messages match your search.{{else}}No messages.{{end}}</div>
  </div>
  {{end}}
</div>
{{end}}