<div class="navbar-container">
    <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler">
        <span class="sr-only">Toggle sidebar</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>
    </button>
    <div class="navbar-header pull-left hidden-xs">
        <a href="/" class="navbar-brand">
            Deep|South|Sounds
        </a>
    </div>

    <div class="navbar-buttons navbar-header pull-right" role="navigation">
        <ul class="nav ace-nav">
            <li id="header-search" class="hidden-xs"></li>
            <% if (com.podnoms.settings.currentUser != -1) { %>
            <li class="nav ace-nav" id="header-notifications">
                <!-- End Notifications li -->
            </li>
            <li class="light-blue">
                <a data-toggle="dropdown" data-bypass="true" href="#" class="dropdown-toggle">
                    <img id="nav-profile-image" class="nav-user-photo"
                         src="<%= com.podnoms.settings.avatarImage %>"
                         alt="Profile Image"/>
                        <span class="user-info">
                            <small>Welcome,</small>
                            <%= com.podnoms.settings.userName %>
                        </span>
                    <i class="ace-icon fa fa-caret-down"></i>
                </a>
                <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-closer">
                    <li>
                        <a href="/me">
                            <i class="ace-icon fa fa-cog"></i>
                            Settings
                        </a>
                    </li>
                    <li>
                        <a href="<%= com.podnoms.settings.userUrl %>">
                            <i class="ace-icon fa fa-user"></i>
                            Profile
                        </a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a data-bypass="true" id="header-logout-button">
                            <i class="ace-icon fa fa-off"></i>
                            Logout
                        </a>
                        <input type="hidden" name="user_id" value="{{ user.id }}"/>
                    </li>
                </ul>
            </li>
            <% } else { %>
            <li class="pull-right">
                <a data-bypass="true" id="header-login-button">Login/Signup</a>
            </li>
            <% } %>
        </ul>
    </div>
</div>
