<div class="no-items-container no-mentions" ng-controller="Wizdom365NotificationPanelMentionsController">
    
	<div ng-show="mentioMode == 'loading'">
		<div class="no-loader">
			{{'loading...' | translate}}
            <span style="display:block"><span class="loader"></span></span>
		</div>
	</div>

    <div ng-show="mentioMode == 'loadComplete' && mentioItemList.length == 0">
		<div class="no-empty">{{'You do not have any new mentions' | translate}}</div>
    </div>

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

		<div class="no-item word-break" ng-repeat="item in mentioItemList | limitTo:limitCountTo">
			<span class="pull-right">
				<i ng-if="item.url === null" class="ms-Icon ms-Icon--ChromeClose ms-Icon--xxs ms-Icon--posTop no-link" ng-click="dismiss(item.targetId);" title="{{'Dismiss' | translate}}" aria-hidden="true"></i>
				<i ng-if="item.url !== null" class="ms-Icon ms-Icon--ChromeClose ms-Icon--xxs ms-Icon--posTop no-link" ng-click="spdismiss(item.targetId);" title="{{'Dismiss' | translate}}" aria-hidden="true"></i>
			</span>
			<div class="no-presence-picture">
				<div style="display:inline-block" class="presence" wizdom365-presence-picture="" size="AVATAR" accountname="item.mentions[0].sender.loginName" name="item.mentions[0].sender.displayName"></div>
			</div>
			<div class="no-spacerForIcon no-presence-picture-spacing">
				{{item.mentions[0].sender.displayName}} {{prepareText(item)}}
				<span ng-if="item.url === null" class="no-heading no-link" ng-click="openItem(item.targetId)" title="{{item.heading}}">
					{{item.heading}}
				</span>
				<span ng-if="item.url !== null" class="no-heading no-link" title="{{item.heading}}">
					<a href="{{item.url}}">{{item.heading}}</a>
				</span>
				<div class="text-muted" am-time-ago="(item.mentions[0].timestamp | wizdom365FormatDate)"></div>
			</div>
		</div>
       
    </div>

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