<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>
