{{define "title"}}Compose{{end}}
{{define "content"}}
<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">New Message</span>
  <div style="flex:1"></div>
  <a href="javascript:history.back()" class="btn btn-ghost btn-sm">Discard</a>
</div>

<div style="flex:1;overflow-y:auto;padding:1rem 1.25rem">
  <form method="POST" action="/compose">
    <input type="hidden" name="_csrf" value="{{.CSRF}}">
    <input type="hidden" name="in_reply_to" value="{{.InReplyTo}}">
    <input type="hidden" name="references" value="{{.References}}">

    <div class="field">
      <label for="to">To</label>
      <input type="text" id="to" name="to" required value="{{.To}}"
             placeholder="recipient@example.com, another@example.com"
             maxlength="2048">
    </div>
    <div class="field">
      <label for="cc">CC</label>
      <input type="text" id="cc" name="cc" value="{{.CC}}"
             placeholder="optional" maxlength="2048">
    </div>
    <div class="field">
      <label for="bcc">BCC</label>
      <input type="text" id="bcc" name="bcc" placeholder="optional" maxlength="2048">
    </div>
    <div class="field">
      <label for="subject">Subject</label>
      <input type="text" id="subject" name="subject" value="{{.Subject}}"
             placeholder="Subject" maxlength="998">
    </div>
    <div class="field">
      <label for="body">Message</label>
      <textarea id="body" name="body" rows="20"
                style="font-family:ui-monospace,monospace;font-size:.8125rem;resize:vertical;min-height:320px"
                placeholder="Write your message here...">{{.BodyText}}</textarea>
    </div>
    <div style="display:flex;gap:.5rem">
      <button type="submit" class="btn btn-primary">Send</button>
      <a href="javascript:history.back()" class="btn btn-ghost">Discard</a>
    </div>
  </form>
</div>
{{end}}