{% extends "zerver/base.html" %}
{# The app itself. #}
{# Includes some other templates as tabs. #}

{% block page_params %}
{# Insert parameters, which have been encoded with JSONEncoderForHTML. #}
<script type="text/javascript">
{% autoescape off %}
var page_params = {{ page_params }};
{% endautoescape %}
</script>
{% endblock %}

{% block customhead %}
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="/static/images/logo/apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed">
<link rel="stylesheet" type="text/css" href="/static/generated/emoji/sprite.css" />
<style type="text/css">

#css-loading {
    background: white;
    position: fixed;
    height: 100%;
    width: 100%;
    padding: 10px;
    top: 0px;
    left: 0px;
}

</style>

{% if nofontface %}
{# We can't use @font-face on qtwebkit, so use differently minified CSS #}
{% stylesheet 'app-fontcompat' %}
{% else %}
{% stylesheet 'app' %}
{% endif %}
{{ minified_js('app')|safe }}

{% if not pipeline %}
<script type="text/javascript" src="/webpack/bundle.js"></script>
{% endif %}

{% if debug %}
{{ minified_js('app_debug')|safe }}
{% endif %}

{% include "zerver/topic_is_muted.html" %}

{% endblock %}
{% block content %}
<div id="css-loading">
    <h3>{{ _('Loading...') }}</h3>
    <p>{% trans %}If this message does not go away, please wait a couple seconds and <a href="javascript:location.reload(true)">reload</a> the page.{% endtrans %}</p>
</div>

<div id="top-screen" class="screen"></div>
<div id="bottom-screen" class="screen"></div>
<div id="left-screen" class="screen"></div>
<div id="right-screen" class="screen"></div>
<div id="clear-screen" class="screen"></div>

<div id="settings_overlay_container" class="overlay" data-overlay="settings">
  {% include "zerver/settings_overlay.html" %}
</div>
{% include "zerver/navbar.html" %}

<div class="fixed-app">
  <div class="app-main">
    <div class="column-middle column-overlay">
        <div id="tab_bar_underpadding"></div>
    </div>
  </div>
</div>

<div class="app">
<div class="alert-box">
    <div class="alert alert_sidebar alert-error home-error-bar" id="connection-error">
        <div class="exit"></div>
        {% trans %}<strong class="message">Unable to connect to Zulip.</strong>  Updates may be delayed.{% endtrans %}
        <div class="faded">{{ _('Retrying soon...') }} <a class="restart_get_events_button">{{ _('Try now.') }}</a></div>
    </div>
    <div class="alert alert_sidebar alert-error home-error-bar" id="get_old_messages_error">
        <div class="exit"></div>
        {% trans %}<strong class="message">Unable to connect to Zulip.</strong>  Could not fetch messages.{% endtrans %}
        <div class="faded">{{ _('Retrying soon...') }}</div>
    </div>
    <div class="alert alert_sidebar alert-error home-error-bar" id="zephyr-mirror-error">
        <div class="exit"></div>
        {# The below isn't tagged for translation
        intentionally, because the feature is only used at
        MIT. #}
        <strong>Your Zephyr mirror is not working.</strong>
        <span id="normal-zephyr-mirror-error-text">
            We recommend that
            you <a class="webathena_login">give Zulip the
                    ability to mirror the messages for you via
            WebAthena</a>.  If you'd prefer, you can instead
            <a href="/zephyr-mirror" target="_blank">run the
            Zephyr mirror script yourself</a> in a screen
            session.
        </span>
        <span id="desktop-zephyr-mirror-error-text" class="notdisplayed">To fix
          this, you'll need to use the web interface.</span>
    </div>
    <div class="alert alert_sidebar alert-error home-error-bar" id="home-error"></div>
    <div class="alert alert_sidebar alert-error home-error-bar" id="reloading-application"></div>
</div>
<div class="app-main">
    <div class="column-left">
          {% include "zerver/left_sidebar.html" %}
    </div>
    <div class="column-middle">
        <div class="column-middle-inner tab-content">
            <div class="tab-pane active" id="home">
            <div class="fixed-app" id="floating_recipient_bar">
              <div class="app-main recipient_bar_content">
                <div class="column-middle column-overlay recipient-bar-main">
                    <div class="floating_recipient">
                      <div style="display: none;" id="current_label_stream" class="recipient_row">
                       <div class="message_label_clickable message_header message_header_stream right_part"></div>
                      </div>
                      <div style="display: none;" id="current_label_private_message" class="recipient_row">
                        <div class="message_label_clickable message_header message_header_private_message right_part"></div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
            <div id="alert-bar-container" class="alert-bar-container" style='display: none;'>
              <div id="alert-bar" class="alert-bar">
                <div id="alert-bar-contents" class="alert-bar-contents">
                  <div id="custom-alert-bar-content"></div>
                  <i class="icon-vector-remove close-alert-icon"></i>
                </div>
              </div>
            </div>
                {% include "zerver/home.html" %}
            </div>

            {% if show_debug %}
            <div class="tab-pane" id="debug">
                {% include "zerver/debug.html" %}
            </div>
            {% endif %}
        </div><!--/tab-content-->
    </div>
    <div class="column-right">
          {% include "zerver/right_sidebar.html" %}
    </div><!--/right sidebar-->
    {% include "zerver/lightbox_overlay.html" %}
    {% include "zerver/subscriptions.html" %}
    {% include "zerver/drafts.html" %}
</div><!--/row-->
    <div class="informational-overlays overlay new-style" data-overlay="informationalOverlays">
        <div class="overlay-content">
            <div class="overlay-tabs">
                <button class="button no-style exit">&times;</button>
            </div>
            <div class="overlay-body">
                {% include "zerver/keyboard_shortcuts.html" %}
                {% include "zerver/search_operators.html" %}
                {% include "zerver/markdown_help.html" %}
            </div>
        </div>
    </div>
    {% include "zerver/invite_user.html" %}
    {% include "zerver/bankruptcy.html" %}
    {% include "zerver/logout.html" %}
    {% include "zerver/tutorial_finale.html" %}
    <div class='notifications top-right'></div>
</div>
{% endblock %}