{% load i18n %}
<div id="compose">
  <div id="compose-notifications" class="notifications above-composebox">
  </div>
  <div id="compose-container">
    <div id="compose_controls" class="compose-content">
          <div id="compose_buttons">
            <span class="new_message_button">
              <button type="button" class="btn btn-default btn-large compose_stream_button"
                      id="left_bar_compose_stream_button_big" title="New stream message (c)">
                <i class="icon-vector-bullhorn"></i><span class="compose_stream_button_label">&nbsp;&nbsp;{% trans 'New stream message' %}</span>
              </button>
            </span>
            {% if not embedded %}
            <span class="new_message_button">
              <button type="button" class="btn btn-default btn-large compose_private_button"
                      id="left_bar_compose_private_button_big" title="New private message (C)">
                <i class="icon-vector-user"></i><span class="compose_private_button_label">&nbsp;&nbsp;{% trans 'New private message' %}</span>
              </button>
            </span>
            {% endif %}
          </div>
    </div>
    <div class="message_comp compose-content">
      <div class="alert" id="send-status">
        <span class="send-status-close">&times;</span>
        <span id="error-msg"></span>
      </div>
      <div  id="compose_invite_users" class="alert" style="display: none"></div>
      <div  id="out-of-view-notification" class="notification-alert">
     </div>
     <div class="composition-area">
      <button type="button" class="close" id='compose_close'>×</button>
      <form id="send_message_form" action="/json/send_message" method="post">
        {% csrf_token %}
        <table class="compose_table">
          <tbody>
            <tr class="ztable_layout_row">
              <td class="ztable_comp_col1" />
              <td class="ztable_comp_col2" />
            </tr>
            <tr id="stream-message">
              <td class="message_header_colorblock message_header_stream left_part">
              </td>
              <td class="right_part">
                  <span id="compose-lock-icon">
                    <i class="icon-vector-lock" title="{% trans 'This is an invite-only stream' %}"></i>
                  </span>
                  <input type="text" class="recipient_box" name="stream" id="stream"
                         maxlength="30"
                         value="" placeholder="{% trans 'Stream' %}" autocomplete="off" tabindex="120"/>
                  <i class="icon-vector-narrow icon-vector-small"></i>
                  <input type="text" class="recipient_box" name="subject" id="subject"
                         maxlength="60"
                         value="" placeholder="{% trans 'Topic' %}" autocomplete="off" tabindex="130"/>
              </td>
            </tr>
            <tr id="private-message">
              <td class="message_header_colorblock message_header_private_message message_header left_part">

              </td>
              <td class="right_part">
                <div class="pm_recipient">
                <span class="you_text">{% trans 'You and' %}</span>
                <input type="text" class="recipient_box" name="recipient" id="private_message_recipient"
                               value="" placeholder="{% trans 'one or more people' %}..." autocomplete="off" tabindex="130"/>
                </div>
              </td>
            </tr>
            <tr>
              <td class="messagebox" colspan="2">
                  <textarea class="new_message_textarea" name="content" id="new_message_content"
                            value="" placeholder="{% trans 'Compose your message here' %}..." tabindex="140" maxlength="10000"></textarea>
              <div id="below-compose-content">
                  <input type="file" id="file_input" class="notvisible pull-left" multiple />
                  <a class="message-control-button icon-vector-dropbox notdisplayed"
                     id="attach_dropbox_files" href="#" title="{% trans 'Attach files from Dropbox' %}"></a>
                  <a class="message-control-button icon-vector-paper-clip notdisplayed"
                     id="attach_files" href="#" title="{% trans 'Attach files' %}"></a>
                  <a class="message-control-button icon-vector-font"
                     href="#markdown-help" title="Formatting" data-toggle="modal"></a>
                  <a id="restore-draft" onclick="compose.restore_message();">{% trans 'Restore draft' %}</a>
                  <span id="sending-indicator">{% trans 'Sending' %}...</span>
                  <div id="send_controls">
                  <label id="enter-sends-label" class="compose_checkbox_label" for="enter_sends">{% trans 'Press Enter to send' %}&nbsp;</label>
                    <input type="checkbox" id="enter_sends" name="enter_sends" value="enter_sends" />
                    <input type="submit" value="Send" id="compose-send-button" class="btn btn-primary send_message" tabindex="150"/>
                  </div>
                </div>

              </td>
            </tr>
          </tbody>
        </table>
      </form>
     </div>
    </div>
  </div>
</div>