mail/src/tpl/write.html

<div class="lightbox__body" ng-controller="WriteCtrl">
  <header class="lightbox__header">
    <h2>{{writerTitle}}</h2>
    <button class="lightbox__close" wo-touch="state.writer.close()" data-action="lightbox-close">
      <svg><use xlink:href="#icon-close" /><title>Close</title></svg>
    </button>
  </header>
  <div class="lightbox__content write">

    <header class="write__header">
      <div class="mail-addresses" focus-input="state.lightbox === 'write' && writerTitle !== 'Reply'"
         focus-input-on-click>
        <div class="mail-addresses__more">
          <button wo-touch="showCC = true;" ng-hide="showCC">Cc</button>
          <button wo-touch="showBCC = true;" ng-hide="showBCC">Bcc</button>
        </div>
        <label>To:</label>
        <tags-input class="tags-input" ng-model="to" type="email" tabindex="1" add-on-space="true" add-on-enter="true" enable-editing-last-tag="true"
          tag-style="tagStyle" display-property="address" on-tag-added="verify($tag)" on-tag-removed="checkSendStatus()"
          allowed-tags-pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
          placeholder="add recipient">
          <auto-complete source="lookupAddressBook($query)" min-length="1"></auto-complete>
        </tags-input>
      </div>
      <div class="mail-addresses" ng-show="showCC === true"
         focus-input="state.lightbox === 'write' && writerTitle !== 'Reply'"
         focus-input-on-click>
        <label>Cc:</label>
        <tags-input class="tags-input" ng-model="cc" type="email" tabindex="1" add-on-space="true" add-on-enter="true" enable-editing-last-tag="true"
          tag-style="tagStyle" display-property="address" on-tag-added="verify($tag)" on-tag-removed="checkSendStatus()"
          allowed-tags-pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
          placeholder="add cc">
          <auto-complete source="lookupAddressBook($query)" min-length="1"></auto-complete>
        </tags-input>
      </div>
      <div class="mail-addresses" ng-show="showBCC === true"
         focus-input="state.lightbox === 'write' && writerTitle !== 'Reply'"
         focus-input-on-click>
        <label>Bcc:</label>
        <tags-input class="tags-input" ng-model="bcc" type="email" tabindex="1" add-on-space="true" add-on-enter="true" enable-editing-last-tag="true"
          tag-style="tagStyle" display-property="address" on-tag-added="verify($tag)" on-tag-removed="checkSendStatus()"
          allowed-tags-pattern='^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$'
          placeholder="add bcc">
          <auto-complete source="lookupAddressBook($query)" min-length="1"></auto-complete>
        </tags-input>
      </div>

      <div class="write__subject">
        <input class="input-text" ng-model="subject" spellcheck="true" tabindex="2" placeholder="Subject" ng-change="updatePreview()">
        <input id="attachment-input" type="file" multiple attachment-input>
        <button class="btn" ng-class="{'btn--invalid': sendBtnSecure === false}" wo-click-file-input="#attachment-input">
          <svg><use xlink:href="#icon-attachment" /><title>Add attachment</title></svg>
        </button>
      </div>

      <ul class="attachments" ng-show="attachments.length > 0">
        <li ng-repeat="attachment in attachments">
          <svg><use xlink:href="#icon-attachment" /></svg>
          {{attachment.filename}}
          <button class="attachments__delete" wo-touch="remove(attachment)">
            <svg><use xlink:href="#icon-close_circle" /><title>Delete</title></svg>
          </button>
        </li>
      </ul>
    </header>

    <textarea class="write__body" ng-model="body" spellcheck="true" wo-focus-me="state.lightbox === 'write' && writerTitle === 'Reply'" tabindex="3"></textarea>

  </div>
  <footer class="lightbox__controls">
    <button wo-touch="sendToOutbox()" class="btn" ng-class="{'btn--invalid': sendBtnSecure === false}"
      ng-disabled="!okToSend" tabindex="4">{{sendBtnText || 'Send'}}</button>
  </footer>
</div>