
    <div class="row">
        <div class="col-sm-4">
            <div class="lt-module-page__content">

                <div class="container-fluid">
                    <div class="wizdom-controls">
                        <div class="row wizdom-controls-row noborder">
                            <div class="col-sm-12">
                                
                                    <h3 class="lt-module-page__content-title">{{"Find in roles" | translate}}</h3>
                                    <div class="form-group">
                                        <label>{{"Select user or group" | translate}}</label>
                                        <div wizdom365-principalpicker
                                             principals="originalPrincipal"
                                             mode="all"
                                             allowmultiple="false"
                                             alloweveryone="true"
                                             allow-external-and-internal="true"
                                             add-fn="addPrincipal(principal)"
                                             remove-fn="removePrincipal(principal)"
                                             class="principal-picker"></div>
                                    </div>
                                    <div class="form-group">
                                        <label>{{"Workspace roles" | translate}}</label>
                                        <div dropdown is-open="rolePicker.open" class="role-dropdown" style="position: relative;">
                                            <input ng-model="rolePicker.search"
                                                   ng-change="rolePicker.open = true"
                                                   ng-focus="rolePicker.setFocus = false"
                                                   wizdom365-set-focus="rolePicker.setFocus"
                                                   dropdown-toggle
                                                   type="search"
                                                   placeholder="{{'Click to add/remove roles' | translate}}"
                                                   class="form-control" />
                                            <ul ng-click="$event.stopPropagation()" class="dropdown-menu" role="menu">
                                                <li ng-repeat-start="st in siteTypes" ng-show="filtered.length" class="dropdown-header">{{st.name}}</li>
                                                <li ng-repeat="r in st.roles | filter:{ name: rolePicker.search } as filtered" ng-class="{'selected-role': r.selected}">
                                                    <a ng-click="toggleRole(st, r)">{{r.name}}</a>
                                                </li>
                                                <li ng-repeat-end class="divider" role="separator" ng-show="!$last && filtered.length"></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div>
                                        <label>{{"Selected roles" | translate}}</label>
                                        <ul ng-if="siteTypes" class="small">
                                            <li ng-repeat="r in selectedRoles">{{r}}</li>
                                        </ul>
                                    </div>
                                    <button ng-click="findPrincipalRoles()"
                                            ng-disabled="!originalPrincipal.length || !selectedRoles.length"
                                            type="button"
                                            class="btn btn-primary">
                                        {{"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>
                    </div>
                </div>
            </div>
            <div>&nbsp;</div>
            <div class="lt-module-page__content">

                <div class="container-fluid">
                    <div class="wizdom-controls">
                        <div class="row wizdom-controls-row noborder">
                            <div class="col-sm-12">

                                <h3 class="lt-module-page__content-title">{{"Replace with" | translate}}</h3>
                                <div class="form-group">
                                    <label>{{"Select user or group" | translate}}</label>
                                    <div wizdom365-principalpicker
                                         principals="replacementPrincipal"
                                         mode="all"
                                         allowmultiple="false"
                                         alloweveryone="true"
                                         allow-external-and-internal="true"
                                         add-fn="addPrincipal(principal)"
                                         remove-fn="removePrincipal(principal)"
                                         class="principal-picker"></div>
                                </div>
                                <button ng-click="replacePrincipal()"
                                        ng-disabled="!originalPrincipal.length || !replacementPrincipal.length || replaceInProgress"
                                        type="button"
                                        class="btn btn-primary">
                                    {{ (replaceInProgress ? "Replacing" : "Replace") | translate}}
                                </button>
                                <div wizdom365-spinner loading="replaceInProgress" class="role-replacing-spinner"></div>

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

            </div>
        </div>
        
        <div class="col-sm-8">
            <div class="lt-module-page__content">
                
                <div class="container-fluid">
                    <div class="wizdom-controls">
                        <div class="row wizdom-controls-row noborder">
                            <div class="col-sm-12">
                
                                <table class="table table-hover table-condensed">
                                    <thead>
                                        <tr>
                                            <th>
                                                <input ng-show="entries.length" ng-click="toggleEntriesSelected()" ng-checked="allEntriesSelected()" type="checkbox" />
                                            </th>
                                            <th>{{"Workspace name" | translate}}</th>
                                            <th>{{"Workspace type" | translate}}</th>
                                            <th>{{"Workspace roles" | translate}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="e in entries">
                                            <td>
                                                <input ng-model="e.selected" type="checkbox" />
                                            </td>
                                            <td>
                                                <span ng-if='e.url === ""'>{{e.name}}</span>
                                                <a ng-if='e.url !== ""' ng-href="{{e.url}}" title="{{e.url}}" target="_blank">{{e.name}}</a>
                                            </td>
                                            <td>{{e.siteType.name}}</td>
                                            <td>{{getRolesString(e.selectedPrincipalRoles)}}</td>
                                        </tr>
                                        <tr ng-if="!entries.length">
                                            <td colspan="4" class="text-center">{{"No items found." | translate}}</td>
                                        </tr>
                                    </tbody>
                                </table>

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


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