<div class="header">
<div class="header-main rightside-userlist" id="top_navbar">
  <div class="column-left">
    <a class="brand logo" href="#"><img src="/static/images/logo/zulipcornerlogo@2x.png" class="logoimage" alt="{{product_name}}" content="{{product_name}}" /></a>
  </div>
  <div class="column-middle" id="navbar-middle">
    <div class="column-middle-inner">
          <div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
            <a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
              <span id="streamlist-toggle-unreadcount">0</span>
            </a>
          </div>
          <div id="searchbox" class="searchbox-rightmargin">
            <div id="tab_bar" class="notdisplayed">
            </div>
            <form id="searchbox_form" class="form-search navbar-search">
              <div id="search_arrows" class="input-append">
                <i class="icon-vector-search"></i>
                <input class="search-query input-block-level" id="search_query" type="text" placeholder="{{ _('Search') }}"
                       autocomplete="off" />
                {# Start the button off disabled since there is no active search #}
                <button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
              </div>
            </form>
          </div>{# /searchbox #}
    </div>
  </div>
  <div class="column-right">
        <div id="userlist-toggle">
            <a href="#" id="userlist-toggle-button" role="button"><i class="icon-vector-group"></i>
              <span id="userlist-toggle-unreadcount">0</span>
            </a>
        </div>
        <div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
            <ul class="nav" role="navigation">
              <li class="dropdown actual-dropdown-menu" id="gear-menu">
                <a id="settings-dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-vector-cog"></i><i class="icon-vector-caret-down settings-dropdown-caret"></i>
                </a>
                <ul class="dropdown-menu" role="menu" aria-labelledby="settings-dropdown">
                  {#
                  It is quite ingrained in our frontend code that your Home
                  view is a Bootstrap Nav tab, even though we don't show the tab
                  anymore
                  #}
                  <li style="display:none;"><a href="#home" data-toggle="tab"></a></li>
                  <li title="Manage Streams">
                    <a href="#subscriptions" data-toggle="tab">
                      <i class="icon-vector-exchange"></i> {{ _('Manage Streams') }}
                    </a>
                  </li>
                  <li title="Settings">
                    <a href="#settings" data-toggle="tab">
                      <i class="icon-vector-wrench"></i> {{ _('Settings') }}
                    </a>
                  </li>
                  <li title="Keyboard shortcuts">
                    <a href="#keyboard-shortcuts" role="button" data-toggle="modal">
                      <i class="icon-vector-question-sign"></i> {{ _('Keyboard shortcuts') }}
                    </a>
                  </li>
                  <li title="Message formatting">
                    <a href="#markdown-help" role="button" data-toggle="modal">
                      <i class="icon-vector-pencil"></i> {{ _('Message formatting') }}
                    </a>
                  </li>
                  <li title="Search help">
                    <a href="#search-operators" role="button" data-toggle="modal">
                      <i class="icon-vector-search"></i> {{ _('Search help') }}
                    </a>
                  </li>
                  <li class="divider"></li>
                  <li title="Desktop & mobile apps">
                    <a href="/apps" target="_blank" role="button">
                      <i class="icon-vector-desktop"></i> {{ _('Desktop & mobile apps') }}
                    </a>
                  </li>
                  <li title="Integrations">
                    <a href="/integrations" target="_blank" role="button">
                      <i class="icon-vector-github"></i> {{ _('Integrations') }}
                    </a>
                  </li>
                  <li title="API documentation">
                    <a href="/api" target="_blank" role="button">
                      <i class="icon-vector-sitemap"></i> {{ _('API documentation') }}
                    </a>
                  </li>
                  <li class="divider"></li>
                  <li title="Administration" class="admin-menu-item">
                    <a href="#administration" role="button" data-toggle="tab">
                      <i class="icon-vector-bolt"></i> {{ _('Administration') }}
                    </a>
                  </li>
                  {% if show_invites %}
                  <li title="Invite more users to {{product_name}}">
                    <a href="#invite-user" role="button" data-toggle="modal">
                      <i class="icon-vector-plus-sign"></i> {{ _('Invite users') }}
                    </a>
                  </li>
                  {% endif %}
                  {% if enable_feedback %}
                  <li title="Feedback">
                    <a href="#feedback" class="feedback">
                      <i class="icon-vector-comment"></i> {{ _('Feedback') }}
                    </a>
                  </li>
                  {% endif %}
                  <li class="divider"></li>
                  {% if show_webathena %}
                  <li title="Grant {{product_name}} the Kerberos tickets needed to run your Zephyr mirror via Webathena" id="webathena_login_menu">
                    <a href="#webathena" class="webathena_login">
                      <i class="icon-vector-bolt"></i>{{ _('Link with Webathena') }}
                    </a>
                  </li>
                  {% endif %}
                  <li title="Log out">
                    <a href="#logout" class="logout_button">
                      <i class="icon-vector-off"></i> {{ _('Log out') }}
                    </a>
                  </li>
                  {% if show_debug %}
                  <li title="Debug">
                    <a href="#debug" data-toggle="tab">
                      <i class="icon-vector-barcode"></i> {{ _('Debug') }}
                    </a>
                  </li>
                  {% endif %}
                </ul>
              </li>
            </ul>
        </div>
  </div>
</div>
</div>
