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

<div class="page-wrap">
  {{ template "aside" . }}

  <div class="container">
    <main class="create-update">

      <form method="post" enctype="multipart/form-data" id="compose-form">
        <input type="hidden" name="message_id" value="{{.Message.MessageID}}">
        <input type="hidden" name="in_reply_to" value="{{.Message.InReplyTo}}">

        <div class="headers no-js">
          <label>From</label>
          <input type="text" name="from" id="from" value="{{.Message.From}}" />

          <label>To</label>
          {{ $to := .Message.ToString }}
          {{ if eq $to "MISSING_MAILBOX@MISSING_DOMAIN" }}
          {{ $to = "" }}
          {{ end }}
          <input
            type="text"
            name="to"
            id="to"
            value="{{$to}}"
            {{ if not $to }} autofocus{{ end }}
          />

          <label>Subject</label>
          <input
            type="text"
            name="subject"
            id="subject"
            value="{{.Message.Subject}}"
            {{ if $to }} autofocus{{ end }}
          />

          <label>Attachments</label>
          <input type="file" name="attachments" id="attachments" multiple>

          <div
            id="attachment-list"
            {{ if .Message.Attachments }}
            style="display: none;"
            {{ end }}
          >
            <div class="help">Drag and drop attachments here</div>
            {{range .Message.Attachments}}
            <div class="upload">
              <label class="filename">
                <input type="checkbox" name="prev_attachments" value="{{.Node.PathString}}" checked>
                {{.Filename}}
              </label>
            </div>
            {{end}}
            <!--
            <div class="upload">
              <span class="progress"></span>
              <span class="filename">foobar.pdf</span>
              <span class="error"></span>
              <span class="size">1234 KiB</span>
              <button>&times;</button>
            </div>
            -->
          </div>

          <input type="hidden" id="attachment-uuids" name="attachment-uuids" value="" />
        </div>

        <div class="text">
          <textarea name="text" class="body">{{.Message.Text}}</textarea>
          <div id="send-progress" style="display: none">
            <!--
              Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
              License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
            -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"/></svg>
            <span class="info">Sending message...</span>
          </div>
        </div>

        <datalist id="emails">
          {{range .Extra.EmailSuggestions}}
            <option value="{{.}}">
          {{end}}
        </datalist>

        <div class="actions">
          <button id="send-button" type="submit">Send Message</button>
          <button id="save-button" type="submit" name="save_as_draft">Save as draft</button>
          <a class="button-link" href="/mailbox/INBOX">Cancel</a>
        </div>
      </form>

    </main>
  </div>
</div>
<script src="/themes/alps/assets/compose.js"></script>

{{template "foot.html"}}