apdli-keycloak-theme/themes/base/admin/resources/partials/user-group-membership.html

 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
     <ol class="breadcrumb">
         <li><a href="#/realms/{{realm.realm}}/users">{{:: 'users' | translate}}</a></li>
         <li>{{user.username}}</li>
     </ol>

     <kc-tabs-user></kc-tabs-user>

     <form class="form-horizontal" name="realmForm" novalidate>
         <div class="form-group" kc-read-only="!user.access.manageGroupMembership">
             <label class="col-md-1 control-label" class="control-label"></label>

             <div class="col-md-8" >
                  <div class="row">
                     <div class="col-md-5">
                         <table class="table table-striped table-bordered" style="margin-bottom: 0">
                             <thead>
                             <tr>
                                 <th class="kc-table-actions" colspan="5">
                                     <div class="form-inline">
                                         <div>
                                            <label class="control-label">{{:: 'group-membership' | translate}}</label>
                                            <kc-tooltip>{{:: 'group-membership.tooltip' | translate}}</kc-tooltip>
                                         </div>
                                         <div class="pull-left">
                                             <div class="input-group">
                                                 <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteriaMembership" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch').click()">
                                                 <div class="input-group-addon">
                                                     <i class="fa fa-search" id="groupSearch" ng-click="searchGroupMembership()"></i>
                                                 </div>
                                             </div>
                                         </div>
                                         &nbsp;
                                         <button id="viewAllGroups" class="btn btn-default" ng-click="clearSearchMembership()">{{:: 'view-all-groups' | translate}}</button>
                                         <div class="pull-right" data-ng-show="user.access.manageGroupMembership">
                                             <button id="leaveGroups" class="btn btn-default" ng-click="leaveGroup()">{{:: 'leave' | translate}}</button>
                                         </div>
                                     </div>
                                 </th>
                             </tr>
                             </thead>
                             <tbody>
                             <tr>
                                 <td>
                                     <div
                                             tree-id="membershipTree"
                                             angular-treeview="true"
                                             tree-model="groupMemberships"
                                             node-id="id"
                                             node-label="path"
                                             node-children="subGroupsMembership" >
                                     </div>
                                 </td>
                             </tr>
                             </tbody>
                         </table>
                         <div style="margin-bottom: 50px">
                             <kc-paging current-page="currentMembershipPage" number-of-pages="numberOfMembershipPages" current-page-input="currentMembershipPageInput"></kc-paging>
                         </div>
                     </div>
                     <div class="col-md-5">
                         <table class="table table-striped table-bordered" style="margin-bottom: 0">
                             <thead>
                             <tr>
                                 <th class="kc-table-actions" colspan="5">

                                     <div class="form-inline">
                                         <div>
                                             <label class="control-label">{{:: 'available-groups' | translate}}</label>
                                             <kc-tooltip>{{:: 'membership.available-groups.tooltip' | translate}}</kc-tooltip>
                                         </div>
                                         <div class="pull-left">
                                             <div class="input-group">
                                                 <input type="text" placeholder="{{:: 'search.placeholder' | translate}}" ng-model="searchCriteria" class="form-control search" onkeydown="if (event.keyCode == 13) document.getElementById('groupSearch_availablegroups').click()">
                                                 <div class="input-group-addon">
                                                     <i class="fa fa-search" id="groupSearch_availablegroups" ng-click="searchGroup()"></i>
                                                 </div>
                                             </div>
                                         </div>
                                         &nbsp;
                                         <button id="viewAllGroups" class="btn btn-default" ng-click="clearSearch()">{{:: 'view-all-groups' | translate}}</button>
                                         <div class="pull-right" data-ng-show="user.access.manageGroupMembership">
                                             <button id="joinGroup" class="btn btn-default" ng-click="joinGroup()">{{:: 'join' | translate}}</button>
                                         </div>
                                     </div>
                                 </th>
                             </tr>
                             </thead>
                             <tbody>
                                 <tr>
                                     <td>
                                         <div
                                             tree-id="tree"
                                             angular-treeview="true"
                                             tree-model="groupList"
                                             node-id="id"
                                             node-label="name"
                                             node-children="subGroups" >
                                         </div>
                                     </td>
                                 </tr>
                             </tbody>
                         </table>
                         <div style="margin-bottom: 50px">
                             <kc-paging current-page="currentPage" number-of-pages="numberOfPages" current-page-input="currentPageInput"></kc-paging>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </form>
 </div>

<kc-menu></kc-menu>