<app-sidebar class="sidebar-height">
  <clr-tree>
    <clr-tree-node *ngIf="groups" class="search-node">
      <div class="tree-search-wrapper">
        <input
          appStealFocus
          clrInput
          #searchLibTreeInput
          placeholder="Filter by Groups"
          name="input"
          [(ngModel)]="groupSearch"
          (keyup)="groupListOnFilter()"
          autocomplete="off"
        />
        <clr-icon
          *ngIf="searchLibTreeInput.value.length < 1"
          shape="search"
        ></clr-icon>
        <clr-icon
          *ngIf="searchLibTreeInput.value.length > 0"
          (click)="groupSearch = ''; groupListOnFilter()"
          shape="times"
        ></clr-icon>
      </div>
    </clr-tree-node>

    <ng-container *ngFor="let group of groups">
      <clr-tree-node
        (click)="groupOnClick(group)"
        *ngIf="!group['hidden']"
        [class.active]="group.GROUPURI === groupUri"
      >
        <p class="m-0 cursor-pointer list-padding">
          <clr-icon shape="users"></clr-icon>
          {{ group.GROUPNAME }}
        </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="groupMembers && !loading">
    <div *ngIf="serverType !== ServerType.SasViya" class="clr-row">
      <div class="clr-col-8">
        <table class="table group-info">
          <tbody>
            <tr>
              <td class="left">
                <p class="group-info-text">
                  <b>{{ groupName }}</b>
                </p>
              </td>
            </tr>
            <tr>
              <td class="left">
                <i>{{ groupDesc || 'no description' }}</i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="clr-row">
      <div class="clr-col-8">
        <div class="card group-data">
          <div *ngIf="serverType !== ServerType.SasViya">
            <h3>MEMBERS ({{ groupMemberCount }})</h3>
            <h5 *ngIf="groupMemberCount == 0">No Members Present</h5>
            <div class="table-container">
              <table *ngIf="groupMemberCount != 0" class="table member-table">
                <thead>
                  <tr>
                    <ng-container *ngIf="serverType === ServerType.Sas9">
                      <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>
                    </ng-container>

                    <ng-container *ngIf="serverType === ServerType.Sasjs">
                      <td class="width-25"><b>ID</b></td>
                      <td class="width-25"><b>DISPLAY NAME</b></td>
                      <td class="width-25"><b>USER NAME</b></td>
                    </ng-container>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    [routerLink]="
                      '/view/usernav/users/' + (member.URIMEM || member.ID)
                    "
                    *ngFor="let member of groupMembers"
                  >
                    <ng-container *ngIf="serverType === ServerType.Sas9">
                      <td class="">{{ member.MEMBERNAME }}</td>
                      <td class="">{{ member.EMAIL }}</td>
                      <td class="">{{ member.MEMBERCREATED }}</td>
                      <td class="">{{ member.MEMBERUPDATED }}</td>
                    </ng-container>

                    <ng-container *ngIf="serverType === ServerType.Sasjs">
                      <td class="">{{ member.ID }}</td>
                      <td class="">{{ member.DISPLAYNAME }}</td>
                      <td class="">{{ member.USERNAME }}</td>
                    </ng-container>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div *ngIf="serverType === ServerType.SasViya">
            <h3>{{ groupName }}</h3>
            <h5 *ngIf="groupMemberCount == 0">No Members Present</h5>
            <div class="table-container">
              <table *ngIf="groupMemberCount != 0" class="table member-table">
                <thead>
                  <tr>
                    <td>
                      <b>MEMBERS ({{ groupMemberCount }})</b>
                    </td>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    [routerLink]="'/view/usernav/users/' + member.MEMBERID"
                    *ngFor="let member of groupMembers"
                  >
                    <td class="">{{ member.MEMBERNAME }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <br />
        </div>
      </div>
    </div>
  </div>
</div>
