<app-sidebar class="sidebar-height">
  <clr-tree>
    @if (roles) {
      <clr-tree-node class="search-node">
        <div class="tree-search-wrapper">
          <input
            appStealFocus
            clrInput
            #searchLibTreeInput
            placeholder="Filter by Roles"
            name="input"
            [(ngModel)]="roleSearch"
            (keyup)="roleListOnFilter()"
            autocomplete="off"
          />
          @if (searchLibTreeInput.value.length < 1) {
            <clr-icon shape="search"></clr-icon>
          }
          @if (searchLibTreeInput.value.length > 0) {
            <clr-icon
              (click)="roleSearch = ''; roleListOnFilter()"
              shape="times"
            ></clr-icon>
          }
        </div>
      </clr-tree-node>
    }
    @for (role of roles; track role) {
      @if (!role['hidden']) {
        <clr-tree-node
          (click)="roleOnClick(role)"
          [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>
      }
    }
  </clr-tree>
</app-sidebar>

<div class="content-area">
  @if (loading) {
    <div class="loadingSpinner">
      <span class="spinner"> Loading... </span>
    </div>
  }
  @if (roleMembers && !loading) {
    <div>
      <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>
              @if (roleMembersCount == 0) {
                <h5>No Members Present</h5>
              }
              <div class="table-container">
                @if (roleMembersCount != 0) {
                  <table 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>
                      @for (member of roleMembers; track member) {
                        <tr
                          [routerLink]="'/view/usernav/users/' + member.URIMEM"
                        >
                          <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>
              @if (roleGroupsCount == 0) {
                <h5>No Groups Present !</h5>
              }
              <div class="table-container">
                @if (roleGroupsCount != 0) {
                  <table 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>
                      @for (group of roleGroups; track group) {
                        <tr
                          [routerLink]="'/view/usernav/groups/' + group.URIMEM"
                        >
                          <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>

./role.component.scss

@import '../../colors.scss';

::ng-deep body[cds-theme="dark"] {
  .role {
      background-color: $headerBackground;
      border-color: $headerBackground;
  }

  .role-data {
      background-color: $headerBackground;
      border-color: $headerBackground;
  }

  .member-table tbody{
    tr:hover{
        background-color: #29404b;
    }
  }
}

::ng-deep body[cds-theme="light"] {
  .role-info{
      background-color: #f9f9f9;
      border-color: #a7a7a7;
      box-shadow: 0px 2px 5px #dad7d7;
  }

  .role-data {
      background-color: #f9f9f9;
      border-color: #a7a7a7;
      box-shadow: 0px 2px 5px #dad7d7;
  }

  .member-table tbody{
    tr:hover{
          background-color: #e6e6e6;
      }
  }
}

.sidebar-height{
    height: 100%;
}
.role-info-text{
    display: inline;
    font-size: 20px;
}
.role-info{
    border: 1px solid;
    border-radius: 3px;
}
.role-info td{
    text-align: center;
}

.role-data{
  border: 1px solid;
  border-radius: 3px;
}
.role-data{
  min-height: unset;
  h3, h5{
      text-align: center;
  }
}
.member-table{
  width: 100%;
}
.member-table tbody{
  tr:hover{
    cursor: pointer;
  }
}
.table-container{
  overflow-y: scroll;
  max-height: 700px;
}
@media screen and (max-width: 768px){
  .role-data{
    min-height: unset !important;
  }
}