<div class="bootstrap-wrapper wt-noticeboard-unread-comments">
	<div class="modal-header">
		<button type="button" class="close closebtn" data-dismiss="modal" data-ng-click="cancel()" aria-hidden="true">&times;</button>
		<h1 class="modal-title"><span class="wizdom-icon icon-bubble-2" />&nbsp;{{'Unread comments' | translate}}</h1>
	</div>

	<div class="modal-body">

		<div ng-show="mode == 'loading'" class="container-fluid">
			<div class="row">
				<div class="col-sm-12">{{'loading' | translate}}</div>
			</div>
		</div>

		<div ng-show="mode == 'nodata'">
			<div class="alert alert-warning" role="alert">{{'No new comments.' | translate}}</div>
		</div>

		<div ng-show="mode == 'dataLoaded'">
			<button type="button" class="btn btn-primary pull-right" ng-click="dismissAll();">{{'Dismiss all' | translate}}</button>
			<div class="wizdom-unreadComment-topSpace"></div>
			<hr class="wizdom-unreadComment-horisontalDevider" />
			<span ng-repeat="item in itemList" wizdom-include="::'commentsSummary'"></span>
			<div class="wizdom-unreadComment-bottomSpace"></div>

			<script type="text/ng-template" id="commentsSummary">
				<div class="wizdom-unreadComment-table">
					<div class="wizdom-unreadComment-imgColumn">
						<div style="display:inline-block" class="presence" wizdom365-presence-picture="" size="AVATAR" accountname="::item.displayUser.loginName" name="::item.displayUser.displayName"></div>
					</div>
					<div class="wizdom-unreadComment-txtColumn">
						<span style="display:inline-block; top: 0;"
							  class="presence"
							  wizdom365-presence-picture=""
							  type="defaultrender"
							  size="EXTRASMALL"
							  accountname="::item.displayUser.loginName"
							  name="::item.displayUser.displayName">
						</span>
						{{::item.displayText}}
						<span class="media-heading wd-noticeboard-media-heading anchored" ng-click="openItem(item.id);">{{::item.heading}}</span>
						<br />
						<span class="wt-commentDate" am-time-ago="(item.displayDate | wizdom365FormatDate)"></span>
					</div>
					<div class="wizdom-unreadComment-iconColumn">
						<label ng-click="dismiss(item);"><span class="glyphicon glyphicon-remove"></span> <a href="">{{'Dismiss' | translate}}</a></label>
					</div>
				</div>
				<hr class="wizdom-unreadComment-horisontalDevider" />
			</script>

		</div>
	</div>


	<div class="modal-footer">
		<button type="button" class="btn btn-default" ng-click="cancel();">{{'Back to news view' | translate}}</button>
	</div>
</div>