<app-sidebar class="sidebar-height">
  <clr-tree>
    <clr-tree-node *ngIf="roles" class="search-node">
      <div class="tree-search-wrapper">
        <input
          appStealFocus
          clrInput
          #searchLibTreeInput
          placeholder="Filter by Roles"
          name="input"
          [(ngModel)]="roleSearch"
          (keyup)="roleListOnFilter()"
          autocomplete="off"
        />
        <clr-icon
          *ngIf="searchLibTreeInput.value.length < 1"
          shape="search"
        ></clr-icon>
        <clr-icon
          *ngIf="searchLibTreeInput.value.length > 0"
          (click)="roleSearch = ''; roleListOnFilter()"
          shape="times"
        ></clr-icon>
      </div>
    </clr-tree-node>
    <ng-container *ngFor="let role of roles">
      <clr-tree-node
        (click)="roleOnClick(role)"
        *ngIf="!role['hidden']"
        [class.active]="role.ROLEURI === roleUri"
      >
        <p class="m-0 cursor-pointer list-padding">
          <clr-icon shape="blocks-group"></clr-icon>
          {{ role.ROLENAME }}
        </p>
      </clr-tree-node>
    </ng-container>
  </clr-tree>
</app-sidebar>

<div class="content-area">
  <div *ngIf="loading" class="loadingSpinner">
    <span class="spinner"> Loading... </span>
  </div>
  <div *ngIf="roleMembers && !loading">
    <div class="clr-row">
      <div class="clr-col-8">
        <table class="table role-info">
          <tbody>
            <tr>
              <td class="left">
                <p class="role-info-text">
                  <b>{{ roleName }}</b>
                </p>
              </td>
            </tr>
            <tr>
              <td class="left">
                <i>{{ roleDesc }}</i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="clr-row">
      <div class="clr-col-8">
        <div class="card role-data">
          <div>
            <h3>MEMBERS ({{ roleMembersCount }})</h3>
            <h5 *ngIf="roleMembersCount == 0">No Members Present</h5>
            <div class="table-container">
              <table *ngIf="roleMembersCount != 0" class="table member-table">
                <thead>
                  <tr>
                    <td class="width-25"><b>NAME</b></td>
                    <td class="width-25"><b>EMAIL</b></td>
                    <td class="width-25"><b>CREATED</b></td>
                    <td class=""><b>UPDATED</b></td>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    [routerLink]="'/view/usernav/users/' + member.URIMEM"
                    *ngFor="let member of roleMembers"
                  >
                    <td class="">{{ member.MEMBERNAME }}</td>
                    <td class="">{{ member.EMAIL }}</td>
                    <td class="">{{ member.MEMBERCREATED }}</td>
                    <td class="">{{ member.MEMBERUPDATED }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <hr />
          <div>
            <h3>Groups ({{ roleGroupsCount }})</h3>
            <h5 *ngIf="roleGroupsCount == 0">No Groups Present !</h5>
            <div class="table-container">
              <table *ngIf="roleGroupsCount != 0" class="table member-table">
                <thead>
                  <tr>
                    <td class="width-25"><b>NAME</b></td>
                    <td class="width-25"><b>EMAIL</b></td>
                    <td class="width-25"><b>CREATED</b></td>
                    <td class=""><b>UPDATED</b></td>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    [routerLink]="'/view/usernav/groups/' + group.URIMEM"
                    *ngFor="let group of roleGroups"
                  >
                    <td class="">{{ group.MEMBERNAME }}</td>
                    <td class="">{{ group.EMAIL }}</td>
                    <td class="">{{ group.MEMBERCREATED }}</td>
                    <td class="">{{ group.MEMBERUPDATED }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <br />
        </div>
      </div>
    </div>
  </div>
</div>
