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

	<div class="noticeboard-archive-commands">

		<nav class="noticeboard-archive-commands" ng-if="view" ng-show="dataReady">
			<form class="navbar-form navbar-left" role="search">
				<div class="row">
					<div class="col-xs-12">
						<div class="noticeboard-archive-filterRow pull-right">
							<i class="glyphicon glyphicon-filter wt-icon" ng-click="showFilter()"></i>
							<span class="wt-linkText" ng-click="showFilter()">{{'Filter' | translate}}</span>
						</div>
					</div>
				</div>
				<div class="form-group row">
					<div class="col-xs-12">
						<div class="input-group">
							<input class="form-control"
								   type="text"
								   ng-model="searchObj.text"
								   ng-pattern="word"
								   ng-trim="false"
								   wizdom365-enter="search()" />
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" ng-click="search()">
									<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
									<!-- {{'Search' | translate}} -->
								</button>
							</span>
						</div>
					</div>
				</div>
			</form>
		</nav>

		<!-- Filters -->
		<div class="alert alert-info"
			 ng-if="channelFilter.length>
			0 ||
			personFilter.length>0 ||
			(dateFilter && startdateFilter!=null && startdateFilter != '') ||
			(dateFilter && enddateFilter!=null && enddateFilter != '')">

			<div ng-if="channelFilter.length>0">
				{{'Filtering by channel(s)' | translate}}:
				<div class="channel" ng-repeat="channel in channelFilter">
					<div class="label label-primary" ng-if="channelFilter.length>1">
						<a href="" ng-click="filterOnChannel(channel)">{{::channel.name}}</a>
						<a class="remove" href="" ng-click="removeChannelFilterItem(channel)">&times;</a>
					</div>
					<div class="label label-primary" ng-if="channelFilter.length==1">
						<span>{{::channel.name}}</span>
						<a class="remove" href="" ng-click="removeChannelFilterItem(channel)">&times;</a>
					</div>
				</div>
			</div>

			<div ng-if="personFilter.length>0">
				{{'Filtering by person' | translate}}:
				<div class="channel" ng-repeat="person in personFilter">
					<div class="label label-primary">
						<span>{{::person.displayName}}</span>
						<a class="remove" href="" ng-click="removePersonFilter()">&times;</a>
					</div>
				</div>
			</div>

			<div ng-if="(dateFilter && startdateFilter!=null && startdateFilter != '')">
				{{'Filtering by from date' | translate}}:
				<div class="channel">
					<div class="label label-primary">
						<span am-time-ago="startdateFilter"></span>
						<a class="remove" href="" ng-click="removeStartDateFilter()">&times;</a>
					</div>
				</div>
			</div>

			<div ng-if="(dateFilter && enddateFilter!=null && enddateFilter != '')">
				{{'Filtering by to date' | translate}}:
				<div class="channel">
					<div class="label label-primary">
						<span am-time-ago="enddateFilter"></span>
						<a class="remove" href="" ng-click="removeEndDateFilter()">&times;</a>
					</div>
				</div>
			</div>
		</div>


	</div>

	<!-- main content -->

	<div class="noticeboard-archive-results wizdom-fullwidth" ng-show="searchReady">
		<div class="NoticeBoardItem" ng-repeat="item in data | limitTo: numPerPage">

			<div class="media-list">
				<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"
											  email="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-show="item.isRead">
												<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">
												<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"-->
										<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 && enableSocialOnItemByDefault) || 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 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.metadata.allowComments == null && enableSocialOnOldItems) || item.metadata.allowComments))">
				</div>
			</div>

		</div>
	</div>
	<!-- end class noticeboard-archive-results -->



	<div class="alert alert-info" ng-if="data && data.length === 0 && searchedAtleastOnce">{{'Nothing matches your search' | translate}}</div>

	<!-- paging content -->

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

</div>