<div class="noticeboard-template-onlyHeading">

	<!-- top control content -->

	<div class="topIconBar {{::view.extendedProperties.hideToolbar ? 'topIconBarWithNoToolbar' : 'topIconBarWithToolbar'}}">
		<div ng-if="view">

			<div class="btn-group pull-right" style="display:inline;" ng-show="::!view.extendedProperties.hideToolbar">
				<div dropdown>
					<span class="wt-linkText" ng-click="createNews()" title="{{'Create' | translate}}">
						<span class="wt-linkText wizdom-icon icon-plus wt-icon" style="" title="{{'Create' | translate}}">
							<span class="hidden-xs">{{'Create' | translate}}</span>
						</span>
					</span>
					<span class="topIconsSpacing"></span>
					<span class="archiveLinkDiv">
						<span class="wt-linkText wizdom-icon icon-cabinet wt-icon" title="{{'Archive' | translate}}" ng-click="goToArchive()" ng-if="::archiveLink" aria-hidden="true">
							<span class="hidden-xs">{{'Archive' | translate}}</span>
						</span>
					</span>
					<span class="topIconsSpacing"></span>
					<span class="wt-linkText settingsLinkDiv" dropdown-toggle ng-click="showSettings = !showSettings" aria-expanded="false" title="{{'Settings' | translate}}">
						<span class="wt-linkText glyphicon glyphicon-cog" title="{{'Settings' | translate}}"><span class="hidden-xs">{{'Settings' | translate}}</span></span>
					</span>
					<ul class="dropdown-menu pull-right" role="menu">
						<li ng-class="{active: selection=='Unread'}"><a href="" ng-click="changeDisplayMode('Unread')">{{'Show unread' | translate}}</a></li>
						<li ng-class="{active: selection=='All'}"><a href="" ng-click="changeDisplayMode('All')">{{'Show all' | translate}}</a></li>
						<li ng-class="{active: selection=='Mine'}"><a href="" ng-click="changeDisplayMode('Mine')">{{'Show my' | translate}}</a></li>
						<li class="divider"></li>
						<li><a href="" ng-click="selectPersonalChannels()">{{'Choose channels' | translate}}</a></li>
						<li><a href="" ng-click="changeReadStatusForAll()">{{'Mark all as read' | translate}}</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
    <div ng-show="!autoUpdatesRunning || restartingTimer" ng-click="reStartAutoUpdateTimer();" class="checkForNewPosts">
        <span class="badge">
            <span class="glyphicons glyphicons-refresh">{{restartingTimer ? 'Checking':'Check for new posts' | translate}}</span>
        </span>
    </div>
	<!-- main content -->

	<div class="wd-noticeboard-results wizdom-fullwidth media-list" ng-if="view">
		<div ng-repeat="item in items | filter: filter" class="NoticeBoardItem">
			<div class="media wd-noticeboard-media {{(item.isRead ? 'wd-noticeboard-mediaRead' : 'wd-noticeboard-mediaUnread')}}">

				<div class="media-body">
					<div class="container-fluid">
						<div class="row">
							<div class="col-xs-12 mediaAdjustablePadding">
								<div class="noticeboard-media-headingRow">
									<a class="media-heading wd-noticeboard-media-heading" href="" ng-click="ShowItem(item.id)" title="{{::item.heading}}">{{::item.heading}}</a>
									<span class="pull-right">
										<span ng-if="item.isRead">
											<i class="glyphicon glyphicon-check wt-linkText wt-checkUncheck" ng-click="changeReadStatus(item)" title="{{'Mark as unread' | translate}}"></i>
										</span>
										<span ng-if="!item.isRead">
											<i class="glyphicon glyphicon-unchecked wt-linkText wt-checkUncheck" ng-click="changeReadStatus(item)" title="{{'Mark as read' | translate}}"></i>
										</span>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- paging content -->

	<div class="container-fluid wd-noticeboard-pagination-container wizdom-fullwidth text-center" ng-if="view && count > view.extendedProperties.itemsPerPage">
		<div class="wd-noticeboard-pagination-inner-container row">
			<pagination total-items="count"
						ng-change="setPage(currentPage - 1)"
						ng-model="currentPage"
						items-per-page="view.extendedProperties.itemsPerPage"
						max-size="5"
						boundary-links="false"
						previous-text="&lsaquo;"
						next-text="&rsaquo;"
						first-text="&laquo;"
						last-text="&raquo;"></pagination>
		</div>
	</div>

</div>