<div class="container-fluid css-generator" ng-controller="ComplianceReportController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title mr-auto">
            <h1>{{'Compliance report' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button class="btn btn-primary" ng-click="getReport();">{{'Show report' | translate}}</button>
            <button class="btn btn-primary" ng-click="getCsv();">{{'Download report (csv)' | translate}}</button>
        </div>
    </div>

    <div class="panel lt-module-page__content-panel form-horizontal">
        <div class="form-group row">
            <div class="col-sm-4">
                <label class="control-label">{{'Url (can be Site Collection, Site, Folder, Page)' | translate }}</label>
            </div>
            <div class="col-sm-8">
                <div class="input-group">
                    <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" type="text" class="form-control"
                           ng-model="url" ng-keypress="addUrlOnEnter($event)" />
                    <span class="input-group-btn">
                        <button class="btn btn-primary" ng-click="addUrl(url);" ng-disabled="!url">{{'Add' | translate}}</button>
                    </span>
                </div>

                <ul class="list-group lt-list">
                    <li class="list-group-item lt-list__item lt-flextable__table" ng-repeat="selectUrl in selectedUrls track by $index">
                        {{selectUrl}}&nbsp;
                        <button type="button" class="close" ng-click="removeSelectedUrl($index)"><span aria-hidden="true">&times;</span></button>
                    </li>
                </ul>

                <div ng-show="urlError" class="alert alert-danger mt-3">
                    {{'Url should start with' | translate}} '{{protocolAndHost}}'
                </div>
                <div ng-show="!selectedUrls.length" class="alert alert-warning mt-3">
                    {{'When no Urls are specified ALL site collections will be searched' | translate}}
                </div>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-4">
                <label class="control-label">{{'Pages to include' | translate }}</label>
            </div>
            <div class="col-sm-8">
                <select class="form-control" ng-model="pageTypes">
                    <option value="All">{{'All Policies and Procedures' | translate}}</option>
                    <option value="WithRequiredReaders">{{'Policies and Procedures with required readers' | translate}}</option>
                    <option value="WithMissingReaders">{{'Policies and Procedures with missing readers' | translate}}</option>
                </select>
            </div>
        </div>
    </div>

    <wizdom365-spinner loading="loadingData"></wizdom365-spinner>

    <div class="panel lt-module-page__content-panel" ng-show="pages.length">
        <br />
        <table class="table">
            <tr>
                <th>
                    <div role="button" class="cursor-pointer" ng-click="setSort('webTitle');">
                        {{'Web' | translate}}
                        <span ng-show="sortColumnName == 'webTitle' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
                        <span ng-show="sortColumnName == 'webTitle' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
                    </div>
                </th>
                <th>
                    <div role="button" class="cursor-pointer" ng-click="setSort('pageName');">
                        {{'Page' | translate}}
                        <span ng-show="sortColumnName == 'pageName' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
                        <span ng-show="sortColumnName == 'pageName' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
                    </div>
                </th>
                <th>
                    <div role="button" class="cursor-pointer" ng-click="setSort('pageVersion');">
                        {{'Version' | translate}}
                        <span ng-show="sortColumnName == 'pageVersion' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
                        <span ng-show="sortColumnName == 'pageVersion' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
                    </div>
                </th>
                <th>
                    <div role="button" class="cursor-pointer" ng-click="setSort('pageLastModified');">
                        {{'Last modified' | translate}}
                        <span ng-show="sortColumnName == 'pageLastModified' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
                        <span ng-show="sortColumnName == 'pageLastModified' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
                    </div>
                </th>
                <th>
                    <div role="button" class="cursor-pointer" ng-click="setSort('needReadUsersCount');">
                        {{'Must read' | translate}}
                        <span ng-show="sortColumnName == 'needReadUsersCount' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
                        <span ng-show="sortColumnName == 'needReadUsersCount' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
                    </div>
                </th>
                <th>
                    <div role="button" class="cursor-pointer" ng-click="setSort('notReadUsersCounter');">
                        {{'Not read' | translate}}
                        <span ng-show="sortColumnName == 'notReadUsersCounter' && !sortReverse" class="glyphicon glyphicon-triangle-top"></span>
                        <span ng-show="sortColumnName == 'notReadUsersCounter' && sortReverse" class="glyphicon glyphicon-triangle-bottom"></span>
                    </div>
                </th>
            </tr>
            <tr ng-repeat-start="item in pages | orderBy:sortColumnName:sortReverse | startFrom:(currentPageNumber - 1)*itemsPerPage | limitTo:itemsPerPage">
                <td>
                    {{item.webTitle}}
                </td>
                <td>
                    <a href="#" ng-href="{{item.pageUrl}}" target="_blank">{{item.pageName}}</a>
                </td>
                <td class="text-right">
                    {{item.pageVersion}}
                </td>
                <td>
                    {{item.pageLastModified | date:'dd.MM.yyyy HH:mm'}}
                </td>
                <td class="text-right">
                    {{item.needReadUsersCount}}
                </td>
                <td class="text-right">
                    {{item.notReadUsersCounter}}
                    <span role="button" class="cursor-pointer"
                            ng-class="!item.expand ? 'glyphicon glyphicon-menu-right' : 'glyphicon glyphicon-menu-down'"
                            ng-click="item.expand=!item.expand"
                            ng-style="(item.notReadUsersCounter === 0) && {'visibility': 'hidden'}"></span>
                </td>
            </tr>
            <tr ng-repeat-end ng-show="item.expand">
                <td></td>
                <td colspan="5">
                    <table class="table">
                        <tr>
                            <th>
                                {{'User' | translate}}
                            </th>
                            <th>
                                {{'Account' | translate}}
                            </th>
                            <th>
                                {{'Reason' | translate}}
                            </th>
                            <th class="text-right">
                                {{'Version read' | translate}}
                            </th>
                        </tr>
                        <tr ng-repeat="user in item.notReadUsers">
                            <td>
                                {{user.displayName}}
                            </td>
                            <td>
                                {{user.accountName}}
                            </td>
                            <td>
                                {{user.reasons.join(', ')}}
                            </td>
                            <td class="text-right">
                                {{user.versionRead}}
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr ng-show="pages.length > itemsPerPage">
                <td colspan="6"><pagination total-items="pages.length" ng-model="currentPageNumber" items-per-page="itemsPerPage" max-size="5" boundary-links="true" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination></td>
            </tr>
        </table>
    </div>
</div>
