<form class="article-add <% if @article.internal: %>is-internal<% else: %>is-public<% end %>" data-type="<%= @article.type %>">
  <input type="hidden" name="type" value="<%= @article.type %>">
  <input type="hidden" name="internal" value="<%= @article.internal %>">
  <input type="hidden" name="form_id" value="<%= @form_id %>">
  <input type="hidden" name="subtype" value="<%= @article.subtype %>">
  <input type="hidden" name="in_reply_to" value="<%= @article.in_reply_to %>">
  <div class="editControls">
    <div class="js-avatar"></div>
    <div class="editControls-item is-hidden pop-select">
      <div class="editControls-iconHolder centered js-selectedArticleType">
        <% for articleType in @articleTypes: %>
        <div class="editControls-icon js-selectableTypes<%- ' hide' if articleType.icon != @article.icon %>" data-type="<%- articleType.name %>">
        <%- @Icon(articleType.icon) %>
        </div>
        <% end %>
      </div>
      <div class="pop-selector is-hidden js-articleTypes">
        <% for articleType in @articleTypes: %>
        <div class="editControls-icon pop-selectable js-articleTypeItem" data-value="<%= articleType.name %>">
          <%- @Icon(articleType.icon, 'pop-selectable-icon') %>
        </div>
        <% end %>
      </div>
    </div>
    <% if @internalSelector: %>
    <div class="editControls-item is-hidden js-toggleVisibility js-selectInternalPublic">
      <div class="editControls-iconHolder">
        <div class="editControls-icon icon-internal" title="<%- @Ti("set to public") %>">
          <%- @Icon('lock') %>
        </div>
        <div class="editControls-icon icon-public" title="<%- @Ti("set to internal") %>">
          <%- @Icon('lock-open') %>
        </div>
      </div>
    </div>
    <% end %>
  </div>
  <div class="article-content bubble-gap">
    <div class="internal-border">

      <div class="input form-group">
        <div class="formGroup-label">
          <label for=""><%- @T('To') %></label>
        </div>
        <div class="controls"><input type="text" name="to" value="<%= @article.to %>" class="form-control js-mail-inputs js-to" required="required"></div>
      </div>
      <div class="input form-group">
        <div class="formGroup-label">
          <label for=""><%- @T('Cc') %></label>
        </div>
        <div class="controls"><input type="text" name="cc" value="<%= @article.cc %>" class="form-control js-mail-inputs js-cc"></div>
      </div>
      <div class="input form-group">
        <div class="formGroup-label">
          <label for=""><%- @T('Subject') %></label>
        </div>
        <div class="controls"><input type="text" name="subject" value="<%= @article.subject %>" class="form-control js-mail-inputs2 js-subject"></div>
      </div>

      <div class="textBubble js-writeArea">
        <div class="bubble-arrow"></div>
        <div class="js-textarea richtext-content articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
        <!-- .textBubble grows with textarea (and expanding clone) -->
        <div class="textBubble-footer js-textSizeLimit">
          <div class="textBubble-signatur"><span class="js-signature"></span></div>
          <div class="textBubble-letterCount js-letterCount"></div>
        </div>
        <div class="attachments"></div>
        <div class="article-attachment">
          <div class="attachmentPlaceholder">
            <span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span>
            <span class="attachmentPlaceholder-inputHolder fileUpload">
              <% uid =  _.uniqueId('fileUpload_') %>
              <input multiple="multiple" type="file" name="file" id="<%- uid %>">
              <label class="attachmentPlaceholder-label" for="<%- uid %>">
                <%- @T('select attachment...') %>
              </label>
            </span>
          </div>
          <div class="attachmentUpload hide">
            <div class="horizontal">
              <div class="u-highlight">
                <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
              </div>
              <div class="attachmentUpload-cancel js-cancel">
                <%- @Icon('diagonal-cross') %><%- @T('Cancel Upload') %>
              </div>
            </div>
            <div class="attachmentUpload-progressBar" style="width: 0%"></div>
          </div>
        </div>
        <div class="dropArea">
          <div class="dropArea-inner">
            <%- @T('Drop files here') %>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>
