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

<div class="row">
  <div class="span9" id="top_statusbar">
    <div id="searchbox" class="always_in_view">
      <form id="searchbox_form" class="form-search form-inline">
        <div id="search_arrows">
          <input class="search-query" id="search_query" type="text" placeholder="Search…" onfocus="search.focus_search();" autocomplete="off">
          <button class="btn search_button search_button_middle" type="button" id="search_up" onclick="search.search_button_handler(true);"><i class="icon-chevron-up"></i></button>
          <button class="btn search_button search_button_middle" type="button" id="search_down" onclick="search.search_button_handler(false);"><i class="icon-chevron-down"></i></button>
          <button class="btn search_button" type="button" id="search_exit" onclick="search.clear_search();"><i class="icon-remove"></i></button>
        </div>
      </form>
    </div>
    <div class="narrowed_to_bar">
      <div id="narrowlabel">
        <div class="close" onclick="narrow.show_all_messages()">&times;</div>
        <span id="currently_narrowed_to"></span>
      </div>
    </div>
    <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_huddle" class="recipient_row">
          <td colspan="2" class="message_label_clickable message_header message_header_huddle left_part"></td>
          <td class="message_label_clickable message_header message_header_huddle right_part"></td>
        </tr>
      </table>
    </div>
  </div>
</div>

<div class="row">
  <div class="span9">
    <div class="message_list" id="main_div">
      <div id="top_whitespace"></div>
      <div id="top_narrowed_whitespace"></div>
      <div id="loading_control">
        <button type="button" class="btn btn-large btn-block" id="load_more"
                onclick="load_more_messages();">Load older messages</button>
        <table id="loading_indicator">
          <tr><td id="loading_spinner"></td><td>Loading...</td></tr>
        </table>
      </div>
      <table class="message_table focused_table" id="zhome">
        <tbody>
        </tbody>
      </table>
      <table class="message_table" id="zfilt">
        <tbody>
        </tbody>
      </table>
      <br/><br/>
      <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">
        <input type="hidden" name="type" value="stream" id="new_message_type"/>
        <input type="hidden" name="client" value="website" id="client_name"/>
        {% 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"
                         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_huddle left_part"></td>
              <td class="message_header message_header_huddle 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">
                <div id="stream_or_huddle">
                  <ul class="nav nav-pills nav-stacked" id="message-type-tabs">
                    <li class="active">
                        <a href="#stream-message" data-toggle="pill" title="Send a stream message" tabindex="100">
                            <i class="icon-bullhorn"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#private-message" data-toggle="pill" title="Send a private message" tabindex="110">
                            <i class="icon-user"></i>
                        </a>
                    </li>
                  </ul>
                </div>
              </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"></textarea>
                  <div tabindex="148" onfocus="ui.safari_composebox_hack(true);"></div>
                  <div tabindex="149" onfocus="ui.safari_composebox_hack(false);"></div>
                  <input type="submit" value="Send" id="compose-send-button" class="btn send_message" tabindex="150"/>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
  </div>
</div>