{# Home tab of the app, containing messages. #}

<div class="row">
  <div class="span9" id="top_statusbar">
    <div class="floating_recipient_bar">
      <table class="floating_recipient">
        <tr id="floating_recipient_layout_row" class="ztable_layout_row">
          <td class="ztable_col1" />
          <td class="ztable_col2" />
          <td class="ztable_col3" />
        </tr>
        <tr style="display: none;" id="current_label_stream" class="recipient_row">
          <td colspan="2" class="message_label_clickable message_header message_header_stream left_part"></td>
          <td class="message_label_clickable message_header message_header_stream right_part"></td>
        </tr>
        <tr style="display: none;" id="current_label_private_message" class="recipient_row">
          <td colspan="2" class="message_label_clickable message_header message_header_private_message left_part"></td>
          <td class="message_label_clickable message_header message_header_private_message right_part"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="row">
  <div class="span9">
    <div class="message_list" id="main_div">
      <div id="loading_more_messages_indicator"></div>
      <div id="page_loading_indicator"></div>
      <table class="message_table focused_table" id="zhome">
        <tbody>
        </tbody>
      </table>
      <table class="message_table" id="zfilt">
        <tbody>
        </tbody>
      </table>
      <div id="bottom_whitespace"></div>
    </div>
  </div>
</div>

<div class="row">
  <div class="span9 compose" id="compose">
    <div class="close composebox-close" onclick="compose.cancel()">&times;</div>
    <div class="message_comp">
      <div class="alert" id="send-status"></div>
      <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_col1" />
              <td class="ztable_col2" />
              <td class="ztable_col3" />
            </tr>
            <tr id="stream-message">
              <td colspan="2" class="message_header message_header_stream left_part">
              </td>
              <td class="message_header message_header_stream right_part">
                  <input type="text" class="recipient_box" name="stream" id="stream"
                         maxlength="30" {% if lurk_stream %}readonly{% endif %}
                         value="" placeholder="Stream" autocomplete="off" tabindex="120"/>
                | <input type="text" class="recipient_box" name="subject" id="subject"
                         maxlength="60"
                         value="" placeholder="Subject" autocomplete="off" tabindex="130"/>
              </td>
            </tr>
            <tr id="private-message">
              <td colspan="2" class="message_header message_header_private_message left_part"></td>
              <td class="message_header message_header_private_message right_part">
                You and <input type="text" class="recipient_box" name="recipient" id="private_message_recipient"
                               value="" placeholder="one or more people..." autocomplete="off" tabindex="130"/>
              </td>
            </tr>
            <tr>
              <td class="message_picture"></td>
              <td class="pointer"></td>
              <td class="messagebox">
                <div class="message_content">
                  <textarea class="new_message_textarea" name="content" id="new_message_content"
                            value="" placeholder="Compose your message here..." tabindex="140" maxlength="10000"></textarea>
                  <div id="send_controls">
                    <a class="compose_help_text" href="#markdown-help" data-toggle="modal" tabindex="160">Formatting</a>
                    <br />
                    <input type="submit" value="Send" id="compose-send-button" class="btn btn-primary send_message" tabindex="150"/>
                  </div>
                  <div tabindex="151" onfocus="ui.safari_composebox_workaround();"></div>
                </div>
                <div id="tab-enter-message">(Send with Tab, then Enter)</div>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>

<div id="notifications-area">
    <div id="notifications-bar"></div>
</div>