{# Home tab of the app, containing messages. #}
    <div class="message_area_padder message_list" id="main_div">
      <div class="top-messages-logo">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 40" version="1.1">
              <g transform="translate(-297.14285,-466.64792)">
              <circle cx="317.14285" cy="486.64792" r="19.030317" style="fill:#444;stroke-width:1.93936479;stroke:#444"/>
              <path d="m309.24286 477.14791 14.2 0 1.6 3.9-11.2 11.9 9.6 0 1.6 3.2-14.2 0-1.6-3.9 11.2-11.9-9.6 0z" style="fill:#fff;stroke:#fff"/>
              </g>
          </svg>
      </div>
      <div id="loading_more_messages_indicator"></div>
      <div id="page_loading_indicator"></div>
      <div id="first_run_message" class="empty_feed_notice">
        <h4>{% trans %}Welcome to {{product_name}}.{% endtrans %}</h4>
        {% trans %}
        <p>See, the thing about it is... there aren't any messages
        here for you right now. I'm sure someone will eventually send
        you one.</p>

        <p>Or, <strong>take matters into your own hands</strong>,
        and <a href="#" class="empty_feed_compose_stream">
        compose a new stream message</a>.</p>
        {% endtrans %}
      </div>
      <div id="empty_narrow_message" class="empty_feed_notice">
        <h4>{{ _("Nothing's been sent here yet!") }}</h4>

        {% trans %}
        <p>Why not <a href="#" class="empty_feed_compose_stream">
            start the conversation</a>?</p>
        {% endtrans %}
      </div>
      <div id="empty_narrow_all_private_message" class="empty_feed_notice">
        <h4>{{ _('You have no private messages yet!') }}</h4>

        {% trans %}
        <p>Why not <a href="#" class="empty_feed_compose_private">
            start the conversation</a>?</p>
        {% endtrans %}
      </div>
      <div id="empty_narrow_private_message" class="empty_feed_notice">
        <h4>{{ _('You have no private messages with this person yet!') }}</h4>

        {% trans %}
        <p>Why not <a href="#" class="empty_feed_compose_private">
            start the conversation</a>?</p>
        {% endtrans %}
      </div>
      <div id="empty_narrow_multi_private_message" class="empty_feed_notice">
        <h4>{{ _('You have no private messages with these people yet!') }}</h4>

        {% trans %}
        <p>Why not <a href="#" class="empty_feed_compose_private">
            start the conversation</a>?</p>
        {% endtrans %}
      </div>
      <div id="silent_user" class="empty_feed_notice">
        <h4>{{ _("You haven't received any messages sent by this user yet!") }}</h4>
      </div>
      <div id="non_existing_user" class="empty_feed_notice">
        <h4>{{ _("This user does not exist!") }}</h4>
      </div>
      <div id="nonsubbed_stream_narrow_message" class="empty_feed_notice">
        <h4>{{ _("You aren't subscribed to this stream and nobody has talked about that yet!") }}</h4>
        <div class="sub_button_row">
          <button class="btn empty_feed_sub_unsub btn-default" type="button" name="subscription">
            {{ _('Subscribe') }}
          </button>
        </div>
      </div>
      <div id="nonsubbed_private_nonexistent_stream_narrow_message" class="empty_feed_notice">
        <h4>{{ _("You are not subscribed to this stream.") }}</h4>
      </div>
      <div id="empty_star_narrow_message" class="empty_feed_notice">
        <h4>{{ _("You haven't starred anything yet!") }}</h4>
      </div>
      <div id="empty_narrow_all_mentioned" class="empty_feed_notice">
        <h4>{{ _("You haven't been mentioned yet!") }}</h4>
      </div>
      <div id="empty_search_narrow_message" class="empty_feed_notice">
        <h4>{{ _('Nobody has talked about that yet!') }}</h4>
      </div>
      <div class="message_table focused_table" id="zhome">
      </div>
      <div class="message_table" id="zfilt">
      </div>
      <div id="bottom_whitespace"></div>
    </div>


{% include "zerver/message_history.html" %}
{% include "zerver/compose.html" %}
<div id="notifications-area">
</div>