<div ng-controller="Wizdom365ModernSitecollectionsController as vm">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Modern Sitecollections' | translate}}</h1>
        </div>
    </div>

    <div class="panel lt-module-page__content-panel">
        <div class="lt-module-page__panel-header">
            <div class="lt-module-page__actions">
                <input class="form-control" placeholder="Search" ng-model="vm.searchQuery" ng-change="vm.getListDebounce()" />
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                        Show {{vm.sitecollectionsPrPage}} {{'Sitecollections' | translate}}
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a ng-click="vm.setNumberOfSitecollectionsPrSite(10)" href="#">10 {{'Sitecollections' | translate}}</a></li>
                        <li><a ng-click="vm.setNumberOfSitecollectionsPrSite(25)" href="#">25 {{'Sitecollections' | translate}}</a></li>
                        <li><a ng-click="vm.setNumberOfSitecollectionsPrSite(50)" href="#">50 {{'Sitecollections' | translate}}</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <wizdom365-spinner class="position-loading" ng-if="vm.showLoading" loading="true"></wizdom365-spinner>

        <table ng-class="{'transparent-on-loading': vm.showLoading}" id="AdminSitecollectionTable" class="table">
            <thead>
                <tr>
                    <th class="orderby" ng-click="!vm.showLoading && vm.sortBy('url')">
                        {{'Url' | translate}}
                        <span ng-if="vm.orderBy === 'url'" class="glyphicon glyphicon-chevron-{{vm.ascending ? 'up' : 'down'}}"></span>
                    </th>
                    <th class="orderby" ng-click="!vm.showLoading && vm.sortBy('sitetype')">
                        {{'Site type' | translate}}
                        <span ng-if="vm.orderBy === 'sitetype'" class="glyphicon glyphicon-chevron-{{vm.ascending ? 'up' : 'down'}}"></span>
                    </th>
                    <th class="orderby" ng-click="!vm.showLoading && vm.sortBy('message')">
                        {{'Message' | translate}}
                        <span ng-if="vm.orderBy === 'message'" class="glyphicon glyphicon-chevron-{{vm.ascending ? 'up' : 'down'}}"></span>
                    </th>
                    <th class="orderby" ng-click="!vm.showLoading && vm.sortBy('action')">
                        {{'Actions' | translate}}
                        <span ng-if="vm.orderBy === 'action'" class="glyphicon glyphicon-chevron-{{vm.ascending ? 'up' : 'down'}}"></span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="{{$index % 2 === 1 ? 'sitecollection-list-view-even' : 'sitecollection-list-view-odd'}}" id="SitecollectionInfoRow" ng-repeat-start="sitecollection in vm.sitecollections">
                    <td>
                        <span title="{{sitecollection.url}}">
                            {{sitecollection.sitecollectionNameReduced}}
                        </span>
                    </td>
                    <td>{{sitecollection.siteType || "Wizdom"}}</td>
                    <td>{{sitecollection.message}}</td>
                    <td class="actionsButtons pull-right">
                        <button ng-disabled="vm.showLoading" class="btn sitecollectionactionbtn btn-danger" ng-click="vm.remove(sitecollection);">{{'Remove' | translate}}</button>
                    </td>
                </tr>
                <tr ng-if="sitecollection.actionMessage" class="{{$index % 2 === 1 ? 'sitecollection-list-view-even' : 'sitecollection-list-view-odd'}}" ng-repeat-end>
                    <td colspan="6">
                        {{sitecollection.actionMessage}}
                    </td>
                </tr>
            </tbody>
        </table>

        <div style="text-align: center;">
            <pagination total-items="vm.totalSitecollections"
                        ng-change="vm.pageChange()"
                        ng-model="vm.currentPageNumber"
                        items-per-page="vm.sitecollectionsPrPage"
                        max-size="5"
                        boundary-links="false"
                        previous-text="&lsaquo;"
                        next-text="&rsaquo;"
                        first-text="&laquo;"
                        last-text="&raquo;">
            </pagination>
        </div>
    </div>
</div>

