<nav class="navbar navbar-default" role="navigation" id="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse-menu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" ui-sref="root" id="brand">Deep|South|Sounds</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="collapse-menu">
        <ul class="nav navbar-nav">
            <li ui-sref-active="active" ng-if="$root.currentUser">
                <a ui-sref="root.upload">
                    <i class="fa fa-cloud-upload"></i>
                    <span>Upload</span>
                </a>
            </li>
        </ul>
        <div class="col-sm-6 col-md-6">
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" ng-model="selected" placeholder="Search..."
                           uib-typeahead="result for results in getSearchResults($viewValue)"
                           typeahead-template-url="app/views/templates/searchResult.html"
                           typeahead-loading="loadingSearchResults"
                           class="form-control navbar-search"/>
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li id="navbar-radio-dropdown" class="dropdown">
                <a href="#" class="dropdown-toggle navbar-button" data-toggle="dropdown" uib-tooltip="Live">
                    <span class="fa fa-1-3x fa-microphone">&nbsp;Radio</span>
                </a>
                <ul class="dropdown-menu">
                    <li class="radio-player-dropdown">
                        <dss-radio-player />
                    </li>
                </ul>
            </li>

            <li id="navbar-notification-dropdown" class="dropdown" ng-if="$root.currentUser">
                <a href="#" class="dropdown-toggle navbar-button" data-toggle="dropdown" id="notifications-button">
                    <span class="fa fa-1-3x fa-envelope"></span>
                    <span ng-if="notificationCount > 0" class="label label-lightred notification-label">{{notificationCount}}</span>
                </a>
                <ul class="dropdown-menu message-ul">
                    <dss-notifications/>
                </ul>
            </li>

            <li id="navbar-profile-dropdown" class="dropdown" ng-if="$root.currentUser">
                <a href="#" class="dropdown-toggle navbar-profile-dropdown" data-toggle="dropdown">{{
                    $root.currentUser.display_name }}
                    <b class="caret"></b>
                    <img class="navbar-profile-image img-circle" ng-src="{{$root.currentUser.profile_image_small}}"
                         alt="">
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a ui-sref="root.me">View profile</a>
                    </li>
                    <li>
                        <a ui-sref="root.me.edit">Account settings</a>
                    </li>
                    <li>
                        <a href="#" ng-click="logout()">Sign out</a>
                    </li>
                </ul>
            </li>
            <li class="ms-hover" ng-if="!$root.currentUser">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                    Login/Signup
                    <i class="fa fa-angle-down"></i>
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <div class="social-buttons">
                            <ul class="list-nostyle">
                                <li>
                                    <a ng-click="doLogin('facebook')" class="btn btn-fb"><i
                                            class="fa fa-facebook"></i> Facebook</a>
                                </li>
                                <li>
                                    <a ng-click="doLogin('twitter')" class="btn btn-tw"><i
                                            class="fa fa-twitter"></i> Twitter</a>
                                </li>
                                <li>
                                    <a ng-click="doLogin('google')" class="btn btn-google"><i
                                            class="fa fa-google"></i>
                                        Google</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>