<div class="container-fluid bootstrap-wrapper" ng-controller="ReplaceContactsController">
    <div class="lt-module-page__top lt-module-page-top">
        <div class="lt-module-page-top__title">
            <h1>{{'Replace Contacts' | translate}}</h1>
        </div>
        <div class="lt-module-page-top__actions">
            <button ng-click="updatePages()"
                    ng-disabled="!replacementPrincipal[0].loginName || loadingPages || updating 
                    || (!replacementPrincipal[0].loginName && !pages.length)"
                    type="button"
                    class="btn btn-primary pull-right">
                {{ (updating ? "Replacing" : "Replace") | 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">{{'Find user' | translate}}</label>
            </div>
            <div class="col-sm-8">
                <div wizdom365-principalpicker ng-model="originalPrincipal" principals="originalPrincipal" mode="users"
                     allowmultiple="false" alloweveryone="true" allow-external-and-internal="true" add-fn="addPrincipal(principal)"
                     remove-fn="removePrincipal(principal)" class="principal-picker"></div>
                <div class="alert alert-danger" role="alert" ng-show="originalPrincipal[0].loginName.length == 0">
                    {{'User needs a valid email' | translate}}
                </div>

                <input type="checkbox" ng-checked="includeAllSitecollections" ng-model="includeAllSitecollections" />
                Include all site collections
                <button ng-click="getPages()"
                        ng-disabled="!originalPrincipal[0].loginName || loadingPages || updating "
                        type="button"
                        class="btn btn-primary pull-right">
                    {{(loadingPages ? "Searching" : "Search") | translate}}
                </button>
                <div ng-show="showingLimitedResults" class="role-replacement-limited text-warning">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>&nbsp;
                    {{'Showing limited results' | translate}} ({{pageLimit}} {{'Results' | translate | lowercase}})
                </div>
            </div>
        </div>

        <br />

        <div class="form-group row">
            <div class="col-sm-4">
                <label class="control-label">{{"Replace with" | translate}}</label>
            </div>
            <div class="col-sm-8">
                <div wizdom365-principalpicker
                     ng-model="replacementPrincipal"
                     principals="replacementPrincipal"
                     mode="users"
                     ng-disabled="updating"
                     allowmultiple="false"
                     alloweveryone="true"
                     allow-external-and-internal="true"
                     add-fn="addPrincipal(principal)"
                     remove-fn="removePrincipal(principal)"
                     class="principal-picker"></div>
            </div>
        </div>
        <div wizdom365-spinner loading="replaceInProgress" class="role-replacing-spinner"></div>
    </div>

    <div class="panel lt-module-page__content-panel" ng-if="pages.length">
        <table class="table table-striped table-hover table-condensed">
            <thead>
                <tr>
                    <th><input type="checkbox" ng-change="selectAllChanged(selectedAll)" ng-model="selectedAll" /></th>
                    <th>{{'Title' | translate}}</th>
                    <th>{{'Contact person (search)' | translate}}</th>
                    <th>{{'Contact person (actually)' | translate}}</th>
                </tr>
            </thead>
            <tr ng-repeat="page in pages | pagination: (currentPage-1) * numPerPage | limitTo: numPerPage">
                <td><input type="checkbox" ng-disabled="page.isCheckedOut" ng-model="page.changeContact"></td>
                <td><a ng-href="{{page.path}}" target="_blank" title="{{page.path}}">{{page.title}}</a></td>
                <td>{{originalPrincipal[0].displayName}}</td>
                <td>{{page.actualContact}}</td>
            </tr>
        </table>
        <div class="text-center">
            <pagination total-items="pages.length" 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 class="text-center">
        <h4 ng-show="pages && !pages.length">{{'No results' | translate}}</h4>
    </div>
</div>

