<div class="noticeboard-template-default">
	<!-- top control content -->

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

			<div class="topIconBarLeftSection">
				<span ng-hide="selection=='Mine' || !enableWebpartLevelNotifications" class="hidden-xs">
					<a class="unreadCommentsLink" ng-click="toggleDisplayMode()" title="{{'Unread elements' | translate}}{{unreadActionTooltip}}">
						<i class="glyphicon glyphicon-bell"></i>
						<span title="{{'Unread elements' | translate}}">{{unreadNewsCount}}</span>
					</a>
				</span>
				&nbsp;
				<span ng-if="::socialFeatureEnabled" ng-hide="selection == 'Mine' || !enableWebpartLevelNotifications" class="hidden-xs">
					<a class="unreadCommentsLink" ng-click="showUnreadComments();" title="{{'Unread comments' | translate}}">
						<i class="glyphicon glyphicon-comment"></i>
						<span title="{{'Unread comments' | translate}}">{{unreadCommentsCount}}</span>
					</a>
				</span>
			</div>

			<div class="topIconBarRightSection">
				<div class="btn-group" 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>

    <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-left">
					<div class="presence media-object"
						 wizdom365-presence-picture
						 size="AVATAR"
						 accountname="::(item.alternateAuthor ? item.alternateAuthor.loginName : item.author.loginName)"
						 name="::(item.alternateAuthor ? item.alternateAuthor.principalID : item.author.principalID)"
						 image="::item.metadata.ImageUrl">
					</div>
				</div>
				<div class="media-body">
					<div class="container-fluid">
						<div class="row">
							<div class="col-xs-12 mediaAdjustablePadding">
								<div class="mobile-heading noticeboard-authorRow">
									<span ng-if="item.isPinned" class="glyphicon glyphicon-pushpin text-muted"></span>
									<span ng-if="item.isPinned" class="text-muted"> | </span>
									<span class="presence media-object text-muted"
										  wizdom365-presence-picture
										  size="SMALL"
										  type="defaultrender"
										  accountname="::(item.alternateAuthor ? item.alternateAuthor.loginName : item.author.loginName)"
										  image="::item.metadata.ImageUrl"
										  name="::(item.alternateAuthor ? (('on behalf of: ' | translate) + item.alternateAuthor.displayName) : item.author.displayName)">
									</span>
									<span class="text-muted"> | </span>
									<span class="text-muted text-center" am-time-ago="::(item.startDate | wizdom365FormatDate)"></span>
									<span class="pull-right markReadUnreadSection">
										<span ng-if="item.isRead">
											<span class="wt-linkText hidden-xs" ng-click="changeReadStatus(item)" title="{{'Mark as unread' | translate}}">{{'Read' | translate}}</span><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">
											<span class="wt-linkText hidden-xs" ng-click="changeReadStatus(item)" title="{{'Mark as read' | translate}}">{{'Read' | translate}}</span><i class="glyphicon glyphicon-unchecked wt-linkText wt-checkUncheck" ng-click="changeReadStatus(item)" title="{{::'Mark as read' | translate}}"></i>
										</span>
									</span>
								</div>
								<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>
								</div>
								<div class="noticeboard-media-channelRow">
									<span class="text-muted" ng-repeat="channel in item.channels">{{::channel.name}}<span ng-hide="::$last">, </span></span>
								</div>
								<div class="media noticeboard-media-TextRow">
									<div class="media-left" ng-if="::(item.contentType && item.metadata)">
										<div class="media-item"
											 ng-if="::(item.contentType.name.indexOf('Video') >= 0 && item.metadata.link)"
											 wizdom365-video-player
											 videolink="::item.metadata.link"
											 thumbnail="::item.metadata.videoImage">
										</div>
										<img ng-click="showPicture(item.metadata.picture)" class="media-item img-thumbnail img-responsive cursor-pointer"
											 ng-if="::((item.contentType.name == 'News' || item.contentType.name == 'RSS') && item.metadata.picture)"
											 ng-src="{{::item.metadata.picture}}"
											 alt="..." />
									</div>
                                    <div class="media-body word-break">
                                        <p ng-bind-html="item.content | checkForLongLinkTextV2 : 300 : 45" ng-click="ShowItem(item.id)" style="cursor: pointer;"></p>
                                        <p wizdom365-item-social-container
                                           item="::item"
                                           itemid="::item.id"
                                           itemtype="item"
                                           tooltipposition="top"
                                           template-url="::view.extendedProperties.socialSummaryTemplate"
                                           ng-if="::(socialFeatureEnabled && ((item.metadata.allowComments == null && enableSocialOnOldItems) || item.metadata.allowComments))">
                                        </p>
                                    </div>
									<div class="text-muted"
										 ng-if="::(socialFeatureEnabled && item)"
										 item-social-preview
										 item="::item"
										 tooltipposition="top">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div>
				<div data-wizdom365-comments-panel
					 data-item="::item"
					 itemid="::item.id"
					 itemtype="item"
                     defaultfocus="true"
					 commentsorderby="::view.extendedProperties.commentsOrderBy"
                     template-url="::view.extendedProperties.socialCommentsTemplate"
					 ng-if="::(socialFeatureEnabled && socialOverviewComments && item && ((item.metadata.allowComments == null && enableSocialOnItemByDefault) || item.metadata.allowComments))">
				</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"
						ng-click="scrollToTop($event)"
						items-per-page="view.extendedProperties.itemsPerPage"
						max-size="view.extendedProperties.maxNumberOfPages"
						boundary-links="false"
						previous-text="&lsaquo;"
						next-text="&rsaquo;"
						first-text="&laquo;"
						last-text="&raquo;"></pagination>
		</div>
	</div>
</div>