<header>
    <div class="navbar-fixed">
        <nav id="nav">
            <div class="nav-wrapper">
                <div class="brand-logo zbrand channel-logo-container">
                    <a href="/" class="brand-logo brand-logo-navigate">
                        <img class="zicon" src="/assets/images/z.svg" alt="zoff-logo" title="Home" />
                    </a>
                    <span id="chan" class="chan clickable" title="Show big URL">{{list_name}}</span>
                </div>
                <ul class="title-container">
                    <li class="song-title cursor-pointer truncate" id="song-title">
                        Loading...
                    </li>
                    <li class="search-container hide" id="search-wrapper">
                        <input id="search" class="search_input" type="text" title="Search for songs..." placeholder="Find song on YouTube..." onsubmit="null;" autocomplete="off" />
                    </li>
                </ul>
                <ul class="right control-list noselect">
                    <li id="search_loader" class="valign-wrapper">
                        <div id="search_loader_inner">
                            <div class="preloader-wrapper small search_loader_spinner">
                                <div class="spinner-layer spinner-white-only">
                                    <div class="circle-clipper left">
                                        <div class="circle"></div>
                                    </div><div class="gap-patch">
                                        <div class="circle"></div>
                                    </div><div class="circle-clipper right">
                                        <div class="circle"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a class="nav-btn" href="#find" id="search-btn">
                            <i class="material-icons">search</i>
                        </a>
                    </li>
                    <li>
                        <a class="nav-btn" href="#stir" id="shuffle">
                            <i class="material-icons">shuffle</i>
                        </a>
                    </li>
                    <li class="settings-hamburger" data-activates="settings-bar" id="settings">
                        <div class="hamburger-sidenav">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </li>
                </ul>
                <ul class="side-nav" id="settings-bar">
                    {{> channel/panel}}
                </ul>
                {{> channel/search}}
            </div>
        </nav>
    </div>
    {{> channel/modal}}
</header>
