{{define "title"}}{{if .Message}}{{.Message.Subject}}{{else}}Message{{end}}{{end}}
{{define "content"}}
<!-- Message toolbar -->
<div style="display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
  <a href="/mail/{{.CurrentBox.ID}}" class="btn btn-ghost btn-sm">Back</a>
  <div style="flex:1"></div>

  <!-- Prev / Next -->
  {{if .NextUID}}<a href="/mail/{{.CurrentBox.ID}}/{{.NextUID}}" class="btn btn-ghost btn-sm">Newer</a>{{end}}
  {{if .PrevUID}}<a href="/mail/{{.CurrentBox.ID}}/{{.PrevUID}}" class="btn btn-ghost btn-sm">Older</a>{{end}}

  <!-- Actions -->
  <a href="/compose?action=reply&boxid={{.CurrentBox.ID}}&uid={{.Message.UID}}" class="btn btn-primary btn-sm">Reply</a>
  <a href="/compose?action=forward&boxid={{.CurrentBox.ID}}&uid={{.Message.UID}}" class="btn btn-ghost btn-sm">Forward</a>

  <form method="POST" action="/mail/{{.CurrentBox.ID}}/{{.Message.UID}}/trash">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
  </form>

  <!-- Star toggle -->
  <form method="POST" action="/mail/{{.CurrentBox.ID}}/{{.Message.UID}}/flag">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <input type="hidden" name="flag" value="star">
    <button type="submit" class="btn btn-ghost btn-sm">{{if .Message.IsStarred}}Unstar{{else}}Star{{end}}</button>
  </form>

  <!-- Move to folder -->
  {{if $.Mailboxes}}
  <form method="POST" action="/mail/{{.CurrentBox.ID}}/{{.Message.UID}}/move" style="display:flex;gap:.25rem">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <select name="dest_box" style="font-size:.75rem;padding:.2rem .4rem;width:auto">
      {{range $.Mailboxes}}
      {{if ne .ID $.CurrentBox.ID}}
      <option value="{{.ID}}">{{if mailboxLabel .Type}}{{mailboxLabel .Type}}{{else}}{{.Name}}{{end}}</option>
      {{end}}
      {{end}}
    </select>
    <button type="submit" class="btn btn-ghost btn-sm">Move</button>
  </form>
  {{end}}
</div>

<!-- Message header -->
<div style="padding:.875rem 1.25rem;border-bottom:1px solid #1f2937;background:#0d1117;flex-shrink:0">
  <h1 style="font-size:1.0625rem;font-weight:600;color:#f9fafb;margin:0 0 .625rem">
    {{if .Message.Subject}}{{.Message.Subject}}{{else}}(no subject){{end}}
  </h1>
  <div style="display:grid;grid-template-columns:auto 1fr;gap:.2rem .625rem;font-size:.8125rem">
    <span style="color:#4b5563">From</span>
    <span style="color:#d1d5db">{{if .Message.FromName}}{{.Message.FromName}} &lt;{{.Message.FromEmail}}&gt;{{else}}{{.Message.FromEmail}}{{end}}</span>
    <span style="color:#4b5563">To</span>
    <span style="color:#d1d5db">{{.Message.ToList}}</span>
    <span style="color:#4b5563">Date</span>
    <span style="color:#d1d5db">{{shortTime .Message.Date}}</span>
    {{if .Message.MessageID}}
    <span style="color:#4b5563">Message-ID</span>
    <span style="color:#4b5563;font-size:.7rem;font-family:monospace">{{.Message.MessageID}}</span>
    {{end}}
  </div>
  {{if .Body.Attachments}}
  <div style="margin-top:.625rem;display:flex;gap:.375rem;flex-wrap:wrap">
    {{range .Body.Attachments}}
    <span class="tag tag-blue">{{if .Filename}}{{truncate .Filename 40}}{{else}}{{.ContentType}}{{end}}</span>
    {{end}}
  </div>
  {{end}}
</div>

<!-- Message body -->
<div style="flex:1;overflow-y:auto">
  {{if .Body.HTML}}
  <iframe sandbox="allow-same-origin"
          srcdoc="{{.Body.HTML}}"
          style="width:100%;min-height:480px;border:none;background:#fff"
          onload="this.style.height=(this.contentDocument.documentElement.scrollHeight+32)+'px'">
  </iframe>
  {{else if .Body.Text}}
  <div style="padding:1.25rem;background:#0d1117">
    <pre style="font-family:ui-monospace,monospace;font-size:.8125rem;line-height:1.6;color:#d1d5db;white-space:pre-wrap;word-break:break-word;margin:0">{{.Body.Text}}</pre>
  </div>
  {{else}}
  <div style="padding:1.25rem;color:#4b5563;font-size:.875rem">(no content)</div>
  {{end}}
</div>
{{end}}