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

	<!-- 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="mobile-heading noticeboard-authorRow">
									<span class="presence media-object text-muted"
										  wizdom365-presence-picture
										  size="SMALL"
										  type="defaultrender"
										  accountname="::(item.alternateAuthor ? item.alternateAuthor.loginName : item.author.loginName)"
										  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">
										<!--<span><a class="wizdom-link wizdom-icon ng-class:item.isRead ? 'icon-mail-read-1' : 'icon-mail-1'" ng-click="changeReadStatus(item)"></a></span>-->
										<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 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">
									<!--ng-show="item.metadata.picture || item.metadata.videoImage"-->
									<!-- ng-if="item.contentType.name == 'Video' && item.metadata.videoImage" -->
									<!-- ng-if="item.contentType.name == 'News' && item.metadata.picture" -->
									<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 : 200 : 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-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"
                     template-url="::view.extendedProperties.socialCommentsTemplate"
					 ng-if="::(socialFeatureEnabled && socialOverviewComments && ((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>