<ul class="nav navbar-top-links navbar-right">
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
        	<div class="badge" ng-if="notifications[2].length > 0">{{notifications[2].length}}</div>
            <i class="fa fa-envelope fa-fw"></i>  <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-messages" ng-if="notifications[2].length > 0">
            <li ng-repeat="notify in notifications[2] | limitTo: '8'">
                <a href="javascript:void(0)" ng-click="markAsRead(notify)">
                    <div>
                        <strong>{{notify.title}}</strong>
                        <span class="pull-right text-muted">
                            <em>22 Ekim 2015</em>
                        </span>
                    </div>
                    <div>{{notify.body}}...</div>
                </a>
            </li>
            <li class="divider"></li>
            <li>
                <a class="text-center" href="javascript:void(0)">
                    <strong>Read All Messages</strong>
                    <i class="fa fa-angle-right"></i>
                </a>
            </li>
        </ul>
        <!-- /.dropdown-messages -->
    </li>
    <!-- /.dropdown -->
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
            <div class="badge" ng-if="notifications[1].length > 0">{{notifications[1].length}}</div>
            <i class="fa fa-tasks fa-fw"></i>  <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-tasks" ng-if="notifications[1].length > 0">
            <li ng-repeat="notify in notifications[1] | limitTo: '8'">
                <a href="javascript:void(0)"  ng-click="markAsRead(notify)">
                    <div>
                        <p>
                            <strong>{{notify.title}}</strong>
                            <span class="pull-right text-muted">{{notify.body}}</span>
                        </p>
                        <!-- todo: progress bar will be used in future developments-->
                        <!--<div class="progress progress-striped active">-->
                            <!--<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">-->
                                <!--<span class="sr-only">40% Complete (success)</span>-->
                            <!--</div>-->
                        <!--</div>-->

                    </div>
                </a>
            </li>
            <li class="divider"></li>
            <li>
                <a class="text-center" href="javascript:void(0)">
                    <strong>See All Tasks</strong>
                    <i class="fa fa-angle-right"></i>
                </a>
            </li>
        </ul>
        <!-- /.dropdown-tasks -->
    </li>
    <!-- /.dropdown -->
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
        	<div class="badge" ng-if="notifications[3].length > 0">{{notifications[3].length}}</div>
            <i class="fa fa-bell fa-fw"></i>  <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-alerts" ng-if="notifications[3].length > 0">
            <li>
                <a href="javascript:void(0)">
                    <div>
                        <i class="fa fa-comment fa-fw"></i> New Comment
                        <span class="pull-right text-muted small">4 minutes ago</span>
                    </div>
                </a>
            </li>
        </ul>
        <!-- /.dropdown-alerts -->
    </li>
    <!-- /.dropdown -->
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown">
            <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
        </a>
        <ul class="dropdown-menu dropdown-user">
            <li><a href="javascript:void(0)"><i class="fa fa-user fa-fw"></i> Profil</a>
            </li>
            <li><a href="javascript:void(0)"><i class="fa fa-gear fa-fw"></i> Ayarlar</a>
            </li>
            <li class="divider"></li>
            <li><a ui-sref="login" href="javascript:void(0);" logout><i class="fa fa-sign-out fa-fw"></i> Çıkış</a>
            </li>
        </ul>
        <!-- /.dropdown-user -->
    </li>
    <!-- /.dropdown -->
</ul>

