<div class="header">
    <nav class="header-main rightside-userlist" id="top_navbar">
        <div class="column-left">
            <a class="brand no-style" href="#">
                <img id="realm-logo" src="" alt="" class="nav-logo no-drag"/>
            </a>
        </div>
        <div class="column-middle" id="navbar-middle">
            <div class="column-middle-inner">
                <div id="streamlist-toggle" {{#if embedded}}class="hide-streamlist-toggle-visibility"{{/if}} title="{{t 'Stream list' }} (q)">
                    <a id="streamlist-toggle-button" role="button" tabindex="0"><i class="fa fa-reorder" aria-hidden="true"></i>
                        <span id="streamlist-toggle-unreadcount">0</span>
                    </a>
                </div>
                <div class="top-navbar-border top-navbar-container">
                    <div id="message_view_header" class="notdisplayed">
                    </div>
                    {{#if search_pills_enabled }}
                    <div id="searchbox">
                        <form id="searchbox_form" class="form-search navbar-search">
                            <div id="search_arrows" class="pill-container input-append">
                                <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
                                <div contenteditable="true" class="input search-query input-block-level" id="search_query" type="text" placeholder="{{t 'Search' }}"
                                  autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)">
                                </div>
                                <button class="btn search_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}">
                                    <i class="fa fa-remove" aria-hidden="true"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                    {{else}}
                    <div id="searchbox_legacy">
                        <form id="searchbox_form" class="form-search navbar-search">
                            <div id="search_arrows" class="input-append">
                                <span class="search_icon search_open" ><i class="fa fa-search" aria-hidden="true"></i></span>
                                <input class="search-query input-block-level home-page-input" id="search_query" type="text" placeholder="{{t 'Search' }}"
                                  autocomplete="off" aria-label="{{t 'Search' }}" title="{{t 'Search' }} (/)"/>
                                <button class="btn search_button" type="button" id="search_exit" aria-label="{{t 'Exit search' }}"><i class="fa fa-remove" aria-hidden="true"></i></button>
                            </div>
                        </form>
                    </div>
                    {{/if}}
                </div>
            </div>
        </div>
        <div class="column-right">
            <div id="userlist-toggle" title="{{t 'User list' }} (w)">
                <a id="userlist-toggle-button" role="button" tabindex="0"><i class="fa fa-group" aria-hidden="true"></i>
                    <span id="userlist-toggle-unreadcount">0</span>
                </a>
            </div>
            <div id="navbar-buttons" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
            </div>
        </div>
    </nav>
</div>
