<li class="no-items-container no-unread-elements" ng-controller="wizdom365NotificationPanelUnreadElementsController">
    
    <div ng-show="unreadNewsMode == 'loading'">
		<div class="no-loader">
			{{'loading...' | translate}}
            <span style="display:block"><span class="loader"></span></span>
		</div>
    </div>

    <div ng-show="unreadNewsMode == 'loadComplete' && unreadNewsCount == 0">
        <div class="no-empty">{{'You do not have any unread news.' | translate}}</div>
    </div>

    <div class="form-actions" style="text-align: right">
        <!-- <button type="button" ng-show="unreadNewsCount > 0" ng-click="dismissAll();" class="btn btn-primary">{{'Mark all as read' | translate}}</button>-->
        <a href="#" ng-show="unreadNewsCount > 1" ng-click="dismissAll();">{{'Mark all as read' | translate}}</a>

    </div>

    <div ng-show="unreadNewsMode == 'loadComplete' && unreadNewsCount > 0">

		<div>

			<div class="no-item word-break" ng-repeat="item in unreadNews | filter: { isRead: false } | limitTo:limitCountTo">
				<span class="pull-right no-link">
					<i class="ms-Icon ms-Icon--ChromeClose ms-Icon--xxs ms-Icon--posTop no-link" ng-click="dismiss(item);" title="{{'Mark as read' | translate}}" aria-hidden="true"></i>
				</span>
				<div class="no-spacerForIcon">
					<span class="no-heading no-link" ng-click="openItem(item.id)" title="{{item.heading}}">{{item.heading}} - </span>
					<span ng-if="item.alternateAuthor" class="text-muted">{{item.alternateAuthor.displayName}}</span>
					<span ng-if="!item.alternateAuthor" class="text-muted">{{item.author.displayName}}</span>
				</div>
			</div>

		</div>

    </div>
	<div class="no-showmore no-link" ng-show="unreadNewsMode == 'loadComplete' && (unreadNews.length>limitCountTo)" ng-click="loadMore()">{{"show more..." | translate}}</div>
</li>