<!-- 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>
                        <th>
                        </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 title="{{'Go to site' | translate}}" ng-href="{{site.url}}" ng-click="checkIfSiteExists(site)" ng-show="webpartProperties.showSiteCreationStatus&& site.sharePointWebStatus.id == 4" class="wizdom-icon icon-circle-filled"></a>
                                <span title="{{'Site is being created. Please wait' | translate}}" ng-show="webpartProperties.showSiteCreationStatus && site.sharePointWebStatus.id == 3" class="wizdom-icon icon-circle-in-progress"></span>
                                <a title="{{'Create site' | translate}}" ng-show="webpartProperties.showSiteCreationStatus && (canCreateSites || site.currentUserCanEditRoles) && (site.sharePointWebStatus.id == 0 || site.sharePointWebStatus.id == 5)" role="button" class="wizdom-icon icon-circle-dashed" ng-click="createSharepointSite(site)"></a>
                                <span title="{{'No site created' | translate}}" ng-show="webpartProperties.showSiteCreationStatus && (!canCreateSites && !site.currentUserCanEditRoles) && (site.sharePointWebStatus.id == 0 || site.sharePointWebStatus.id == 5)" class="wizdom-icon icon-circle-dashed"></span>

                                <a title="{{'Add to favourites' | translate}}" ng-show="!site.isFavourite" role="button" class="glyphicon glyphicon-star-empty" ng-click="addFavourite(site)"></a>
                                <a title="{{'Remove from favourites' | translate}}" ng-show="site.isFavourite" role="button" class="glyphicon glyphicon-star" 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>
                                <a ng-show="site.sharePointWebStatus.id == 0 && !site.teamUrl && !site.o365GroupId && site.modernSiteUrl " ng-href="{{site.modernSiteUrl}}" ng-bind-html="site.name"></a>
                                <a ng-show="site.sharePointWebStatus.id == 0 && !site.teamUrl && site.o365GroupId" ng-href="/_layouts/groupstatus.aspx?id={{site.o365GroupId}}" ng-bind-html="site.name"></a>                                
                                <a ng-show="site.sharePointWebStatus.id == 0 && site.teamUrl" ng-href="{{site.teamUrl}}" ng-bind-html="site.name" target="_blank"></a>
                                <span ng-hide="site.sharePointWebStatus.id == 4 || (site.sharePointWebStatus.id == 0 && site.o365GroupUrl) || (site.sharePointWebStatus.id == 0 && site.modernSiteUrl)" 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>
                        <td style="text-align:right;padding-right:10px;">
                            <div class="dropdown" ng-hide="site.deleting||false" ng-if="site.currentUserCanEditMetadata || site.currentUserCanEditRoles || site.currentUserCanDeleteSite">
                                <span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer">
                                    <span class="glyphicons glyphicons-option-vertical"></span>
                                </span>
                                <ul class="dropdown-menu">
                                    <li ng-if="site.currentUserCanEditRoles">
                                        <a href="" ng-click="editProjectRoles(site)">
                                            <i class="glyphicons glyphicons-group"></i>{{'Edit Roles' | translate}}
                                        </a>
                                    </li>
                                    <li ng-if="site.currentUserCanEditMetadata">
                                        <a href="" ng-click="editProjectMetadata(site)">
                                            <i class="glyphicons glyphicons-pie-chart"></i>{{'Edit Metadata' | translate}}
                                        </a>
                                    </li>
                                    <li ng-if="site.currentUserCanDeleteSite">
                                        <a href="" ng-click="deleteSite(site)">
                                            <i class="glyphicons glyphicons-remove-sign"></i>{{'Delete Site' | translate}}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                    <tr ng-if="responsiveType == 'collapse'" ng-repeat="site in sites track by $index">
                        <td colspan="2" ng-show="site.deleting||false">
                          &nbsp; <wizdom365-spinner loading="site.deleting" style="position: absolute;margin-top: 5px;left: 40%;"></wizdom365-spinner>
                        </td>
                        <td ng-hide="site.deleting||false">
                            <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>
                                <a ng-show="site.sharePointWebStatus.id == 0 && !site.teamUrl && !site.o365GroupId && site.modernSiteUrl " ng-href="{{site.modernSiteUrl}}" ng-bind-html="site.name"></a>
                                <a ng-show="site.sharePointWebStatus.id == 0 && !site.teamUrl && site.o365GroupId" ng-href="/_layouts/groupstatus.aspx?id={{site.o365GroupId}}" ng-bind-html="site.name"></a>
                                <a ng-show="site.sharePointWebStatus.id == 0 && site.teamUrl" ng-href="{{site.teamUrl}}" ng-bind-html="site.name" target="_blank"></a>
                                <span ng-hide="site.sharePointWebStatus.id == 4 || (site.sharePointWebStatus.id == 0 && site.o365GroupUrl) || (site.sharePointWebStatus.id == 0 && site.modernSiteUrl)" 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>
                        <td style="text-align:right;padding-right:10px;" >
                            <div class="dropdown" ng-hide="site.deleting||false" ng-if="site.currentUserCanEditMetadata || site.currentUserCanEditRoles || site.currentUserCanDeleteSite">
                                <span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer">
                                    <span class="glyphicons glyphicons-option-vertical"></span>
                                </span>
                                <ul class="dropdown-menu">
                                    <li ng-if="site.currentUserCanEditRoles">
                                        <a href="" ng-click="editProjectRoles(site)">
                                            <i class="glyphicons glyphicons-group"></i>{{'Edit Roles' | translate}}
                                        </a>
                                    </li>
                                    <li ng-if="site.currentUserCanEditMetadata">
                                        <a href="" ng-click="editProjectMetadata(site)">
                                            <i class="glyphicons glyphicons-pie-chart"></i>{{'Edit Metadata' | translate}}
                                        </a>
                                    </li>
                                    <li ng-if="site.currentUserCanDeleteSite">
                                        <a href="" ng-click="deleteSite(site)">
                                            <i class="glyphicons glyphicons-remove-sign"></i>{{'Delete' | translate}}
                                        </a>
                                    </li>
                                </ul>
                            </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>
