<!-- server side template -->
<div class="bootstrap-wrapper wt-webpart-projectspace wt-webpart-projectspace-overview">
	<!-- actions -->
	<div class="row add-bottom-padding">
		<div class="col-xs-12">
			<div class="pull-right">
				<!-- create -->
				<i class="wizdom-icon icon-plus wt-icon" style="" ng-show="canCreateSites" ng-click="openNewSitePopup()" title="{{'Create' | translate}}"></i>
				<span class="wt-linkText" ng-show="canCreateSites" ng-click="openNewSitePopup()" title="{{'Create' | translate}}">{{'Create' | translate}}</span>
				<!-- add filters -->

				<span ng-if="sites.length > 0 && possibleFilters.length>0" class="dropdown-toggle" data-toggle="dropdown">
					<span class="glyphicon glyphicon-filter pointer"></span>
					<span class="wt-linkText">
						{{'Choose filter' | translate}}
					</span>
				</span>
				<ul class="dropdown-menu" ng-if="possibleFilters.length>0">
					<li ng-repeat="column in possibleFilters"><a href="" ng-click="addFilter(column)">{{metaHelper.getDisplayName(column)}}</a></li>
				</ul>

			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div class="input-group input-group-sm">
				<input type="text" class="form-control"
					   ng-model="searchText"
					   autocomplete="off"
					   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
					   placeholder="{{'Search' | translate}}"
					   ng-change="searchProjects(searchText)" />

				<span class="input-group-addon">
					<span ng-show="!searchText" class="glyphicon glyphicon-search"></span>
					<span ng-show="searchText" ng-click="searchText = '';searchProjects(searchText)" class="glyphicon glyphicon-remove"></span>
				</span>
			</div>
		</div>
	</div>

	<!-- filter form -->
	<div wizdom-include='webpartProperties.filtersTemplateUrl'></div>

	<!-- view -->
	<div class="row">
		<div class="col-xs-12">
			<table class="table table-striped table-condensed" ng-if="sites.length > 0" ng-class="(overviewDataLoading == true) ? 'overviewDataLoading' : ''">
				<thead>
					<tr>
						<th>
							<a href="#" ng-click="setSort('name');">
								{{'Title' | translate}}
								<span ng-show="sortColumnName == 'name' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
								<span ng-show="sortColumnName == 'name' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
							</a>
						</th>
						<th ng-if="responsiveType == 'showAll'" ng-repeat="metadata in webpartProperties.selectedMetadata track by $index">
							<a href="#" ng-click="toggleSort($index);" ng-if="(metadata.indexOf('role:') < 0)">
								{{metaHelper.getDisplayNameByName(metadataDefinitions, metadata)}}
								<span ng-show="sortColumnName == metaHelper.getDisplayNameByName(metadataDefinitions, metadata) && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
								<span ng-show="sortColumnName == metaHelper.getDisplayNameByName(metadataDefinitions, metadata) && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
							</a>
							<div ng-if="(metadata.indexOf('role:') > -1)">
								{{metaHelper.getDisplayNameByName(metadataDefinitions, metadata)}}
							</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<!-- | startFrom:(currentPage - 1)*webpartProperties.sitesPerPage | limitTo:webpartProperties.sitesPerPage should be replaced with empty space -->
					<!-- | orderBy:sortType:sortReverse | filter:filterRoles | wizdom365ProjectSpaceFilterFilter:filterObjects | wizdom365ProjectSpaceSearchFilter:searchText  -->
					<tr ng-if="responsiveType == 'showAll'" ng-repeat="site in sites track by $index">
						<td>
							<div class="ms-displayInline">
								<a ng-href="{{site.url}}" ng-click="checkIfSiteExists(site)" ng-show="!webpartProperties.alwaysCreateSPSite && site.sharePointWebStatus.id == 4" title="{{'Go to site' | translate}}" class="wizdom-icon icon-circle-filled"></a>
								<span ng-show="!webpartProperties.alwaysCreateSPSite && site.sharePointWebStatus.id == 3" title="{{'Site is being created. Please wait' | translate}}" class="wizdom-icon icon-circle-in-progress"></span>
								<a ng-show="!webpartProperties.alwaysCreateSPSite && (canCreateSites || site.currentUserCanEditRoles) && (site.sharePointWebStatus.id == 0 || site.sharePointWebStatus.id == 5)" title="{{'Create site' | translate}}" role="button" class="wizdom-icon icon-circle-dashed" ng-click="createSharepointSite(site)"></a>
								<span ng-show="!webpartProperties.alwaysCreateSPSite && (!canCreateSites && !site.currentUserCanEditRoles) && (site.sharePointWebStatus.id == 0 || site.sharePointWebStatus.id == 5)" title="{{'No site created' | translate}}" class="wizdom-icon icon-circle-dashed"></span>
								<a ng-show="!site.isFavourite" role="button" class="glyphicon glyphicon-star-empty" title="{{'Add to favourites' | translate}}" ng-click="addFavourite(site)"></a>
								<a ng-show="site.isFavourite" role="button" class="glyphicon glyphicon-star" title="{{'Remove from favourites' | translate}}" ng-click="removeFavourite(site)"></a>
								<a ng-show="site.sharePointWebStatus.id == 4" ng-href="{{site.url}}" ng-click="checkIfSiteExists(site)" ng-bind-html="site.name"></a>
								<span ng-hide="site.sharePointWebStatus.id == 4" ng-bind-html="site.name"></span>
							</div>
						</td>
						<td ng-repeat="(key, metadata) in site.metadata | wizdom365ProjectSpaceColumnLimiterFilter:webpartProperties.selectedMetadata track by $index">
							<div ng-if="metadata" wizdom-include='webpartProperties.columnsTemplateUrl'></div>
						</td>
					</tr>
					<tr ng-if="responsiveType == 'collapse'" ng-repeat="site in sites track by $index">
						<td>
							<div class="ms-displayInline">
								<a ng-show="!site.isFavourite" role="button" class="glyphicon glyphicon-star-empty" title="{{'Add to favourites' | translate}}" ng-click="addFavourite(site)"></a>
								<a ng-show="site.isFavourite" role="button" class="glyphicon glyphicon-star" title="{{'Remove from favourites' | translate}}" ng-click="removeFavourite(site)"></a>
								<a ng-show="site.sharePointWebStatus.id == 4" ng-href="{{site.url}}" ng-click="checkIfSiteExists(site)" ng-bind-html="site.name"></a>
								<span ng-hide="site.sharePointWebStatus.id == 4" ng-bind-html="site.name"></span>
								<span class="pull-right pointer"
									  ng-class="!site.selected ? 'glyphicon glyphicon-menu-right' : 'glyphicon glyphicon-menu-down'"
									  ng-click="site.selected=!site.selected"
									  ng-show="webpartProperties.selectedMetadata.length > 0"></span>
							</div>
							<div class="projectspace-details" ng-class="{'hidden':!site.selected, '':site.selected}">
								<div ng-repeat="(key, metadata) in site.metadata | wizdom365ProjectSpaceColumnLimiterFilter:webpartProperties.selectedMetadata track by $index">
									<span ng-if="metadata" class="projectspace-details-label">{{metadata.metadataDefinition.name.length > 0 ? metadata.metadataDefinition.name : metadata.name }}:</span>
									<div ng-if="metadata" class="projectspace-details-text" wizdom-include='webpartProperties.columnsTemplateUrl'></div>
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
			<div ng-if="overviewDataLoading == false && sites.length == 0" class="overviewNoItemsFound">
				{{'No items found.' | translate}}
				<a ng-if="filterObjects.length == 0 && searchText.length == 0 && sites.length == 0" class="overviewNoItemsFound" ng-show="canCreateSites" ng-click="openNewSitePopup()" title="{{'Click here to create an item' | translate}}">{{'Click here to create an item' | translate}}</a>
			</div>
		</div>
	</div> <!-- ng-show="sites.length > webpartProperties.sitesPerPage" replaces with ng-show="totalCount > webpartProperties.sitesPerPage" -->
	<!-- (sites | filter:filterRoles | wizdom365ProjectSpaceFilterFilter:filterObjects | wizdom365ProjectSpaceSearchFilter:searchText).length replaces with totalCount-->
	<!-- ng-model="currentPage" changes to ng-model="currentPage" ng-change="pageChanged()"-->
	<div class="row text-center" ng-show="totalCount > webpartProperties.sitesPerPage">
		<div class="col-xs-12">
			<pagination total-items="totalCount"
						ng-model="currentPage.value"
						ng-change="pageChanged(currentPage.value)"
						items-per-page="webpartProperties.sitesPerPage"
						max-size="5"
						boundary-links="false"
						previous-text="&lsaquo;"
						next-text="&rsaquo;"
						first-text="&laquo;"
						last-text="&raquo;"></pagination>
		</div>
	</div>
</div>
