<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}}">
						<span class="badge" title="{{'Unread elements' | translate}}" ng-hide="unreadNewsCount == ''">{{unreadNewsCount}}</span>
						{{'Unread elements' | translate}}
					</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}}">
						<span class="badge" title="{{'Unread comments' | translate}}" ng-hide="unreadCommentsCount == ''">{{unreadCommentsCount}}</span>
						{{'Unread comments' | translate}}
					</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="container-fluid">
		<div vertilize-container class="row">
			<!-- Card Projects -->
			<div ng-repeat="item in items | filter: filter" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
				<div class="card">
					<div vertilize class="card-responsive">
						<div class="card-image">

							<div ng-if="item.contentType && item.metadata && 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="img-responsive cursor-pointer"
								 ng-if="item.contentType && item.metadata && (item.contentType.name == 'News' || item.contentType.name == 'RSS') && item.metadata.picture"
								 ng-src="{{item.metadata.picture}}"
								 alt="..." />

							<!--<img class="img-responsive" src="http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7TDlCYzRROE84YWM/materialdesign_introduction.png">-->
							<span class="card-title">
								<a class="media-heading wd-noticeboard-media-heading" href="" ng-click="ShowItem(item.id)" title="{{item.heading}}">{{item.heading}}</a>
							</span>
						</div>
						<div class="card-user">
							<div class="img-responsive userpic"
								 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="card-content">
							<p ng-bind-html="item.content | wizdom365SmartHtmlStrip:300" ng-click="ShowItem(item.id)" style="cursor: pointer;"></p>
						</div>
						<div class="card-action">
							<a href="#" target="new_blank">Link</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--<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 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-show="item.isRead">
											<span class="wt-linkText hidden-xs" ng-click="changeReadStatus(item)" title="{{'Mark as unread' | translate}}">{{'Mark as unread' | translate}}</span><i class="glyphicon glyphicon-check wt-linkText wt-checkUncheck" ng-click="changeReadStatus(item)" title="{{'Mark as unread' | translate}}"></i>
										</span>
										<span ng-hide="item.isRead">
											<span class="wt-linkText hidden-xs" ng-click="changeReadStatus(item)" title="{{'Mark as read' | translate}}">{{'Mark as 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 class="media-item img-thumbnail img-responsive"
											 ng-if="item.contentType.name == 'News' && item.metadata.picture"
											 ng-src="{{item.metadata.picture}}"
											 alt="..." />
									</div>
									<div class="media-body word-break">
										<p ng-bind-html="item.content | wizdom365SmartHtmlStrip:300" ng-click="ShowItem(item.id)" style="cursor: pointer;"></p>
										<p wizdom365-item-social-container
										   item="item"
										   itemid="item.id"
										   itemtype="item"
										   tooltipposition="top"
										   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"
					 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="true"
						previous-text="&lsaquo;"
						next-text="&rsaquo;"
						first-text="&laquo;"
						last-text="&raquo;"></pagination>
		</div>
	</div>

</div>