<app-sidebar class="sidebar-height">
  <clr-tree>
    <clr-tree-node *ngIf="users" class="search-node">
      <div class="tree-search-wrapper">
        <input
          appStealFocus
          clrInput
          #searchLibTreeInput
          placeholder="Filter by Users"
          name="input"
          [(ngModel)]="userSearch"
          (keyup)="userListOnFilter()"
          autocomplete="off"
        />
        <clr-icon
          *ngIf="searchLibTreeInput.value.length < 1"
          shape="search"
        ></clr-icon>
        <clr-icon
          *ngIf="searchLibTreeInput.value.length > 0"
          (click)="userSearch = ''; userListOnFilter()"
          shape="times"
        ></clr-icon>
      </div>
    </clr-tree-node>
    <ng-container *ngFor="let user of users">
      <clr-tree-node
        (click)="userOnClick(user)"
        *ngIf="!user['hidden']"
        [class.active]="userInfo?.URI === user.URI"
      >
        <p class="m-0 cursor-pointer list-padding">
          <clr-icon shape="user"></clr-icon>
          {{ user.NAME }}
        </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="userData && !loading">
    <div *ngIf="serverType !== ServerType.SasViya" class="clr-row">
      <div class="clr-col-8">
        <table class="table user-info">
          <tbody>
            <tr>
              <td class="left">
                <p class="user-info-text">
                  <b>{{ userInfo.NAME }}</b>
                </p>
              </td>
            </tr>
            <tr>
              <td class="left">
                <p class="user-info-text">
                  <b>{{ userInfo.DISPLAYNAME }}</b>
                </p>
              </td>
            </tr>
            <ng-container *ngIf="serverType === ServerType.Sas9">
              <tr>
                <td class="left">
                  Metadata Created: <b>{{ userInfo.METADATACREATED }}</b>
                </td>
              </tr>
              <tr>
                <td class="left">
                  Metadata Updated: <b>{{ userInfo.METADATAUPDATED }}</b>
                </td>
              </tr>
            </ng-container>
          </tbody>
        </table>
      </div>
    </div>

    <div *ngIf="serverType === ServerType.SasViya && userInfo" class="clr-row">
      <div class="clr-col-8">
        <table class="table user-info">
          <tbody>
            <tr>
              <td class="left">
                <p class="user-info-text">
                  <b>{{ userInfo.NAME }}</b>
                </p>
              </td>
            </tr>
            <tr>
              <td class="left">
                User ID: <b>{{ userInfo.URI }}</b>
              </td>
            </tr>
            <tr>
              <td class="left">
                User provider ID: <b>{{ userInfo.PROVIDER }}</b>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="clr-row">
      <div class="clr-col-8">
        <div class="card user-data">
          <div *ngIf="serverType === ServerType.Sas9">
            <h3>EMAILS ({{ userEmailsCount || '0' }})</h3>
            <h5 *ngIf="userEmailsCount == 0">No Emails Present</h5>
            <div class="table-container">
              <table *ngIf="userEmailsCount != 0" class="table user-table">
                <thead>
                  <tr>
                    <td class="width-50"><b>EMAIL</b></td>
                    <td class=""><b>TYPE</b></td>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let email of userEmails">
                    <td class="">{{ email.EMAIL }}</td>
                    <td class="">{{ email.TYPE }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <hr *ngIf="serverType === ServerType.Sas9" />
          <div>
            <h3>GROUPS ({{ userGroupsCount || '0' }})</h3>
            <h5 *ngIf="userGroupsCount == 0">No Groups Present</h5>
            <div class="table-container">
              <table *ngIf="userGroupsCount != 0" class="table user-table">
                <tbody>
                  <tr *ngFor="let group of userGroups">
                    <td
                      *ngIf="serverType === ServerType.SasViya"
                      [routerLink]="'/view/usernav/groups/' + group.URI"
                      routerLinkActive="active"
                      class=""
                    >
                      {{ group.GROUPNAME }}
                    </td>
                    <ng-container *ngIf="serverType !== ServerType.SasViya">
                      <td
                        [routerLink]="
                          '/view/usernav/groups/' +
                          (group.GROUPURI || group.URI)
                        "
                        routerLinkActive="active"
                        class=""
                      >
                        {{ group.GROUPNAME }}
                      </td>
                    </ng-container>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <hr *ngIf="serverType === ServerType.Sas9" />
          <div *ngIf="serverType === ServerType.Sas9">
            <h3>ROLES ({{ userRolesCount || '0' }})</h3>
            <h5 *ngIf="userRolesCount == 0">No Roles Present</h5>
            <div class="table-container">
              <table *ngIf="userRolesCount != 0" class="table user-table">
                <tbody>
                  <tr *ngFor="let role of userRoles">
                    <td
                      [routerLink]="
                        '/view/usernav/roles/' + getRoleURI(role.ROLEURI)
                      "
                    >
                      {{ role.ROLENAME }}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <hr *ngIf="serverType === ServerType.Sas9" />
          <div *ngIf="serverType === ServerType.Sas9">
            <h3>LOGINS ({{ userLoginsCount || '0' }})</h3>
            <h5 *ngIf="userLoginsCount == 0">No Logins Present</h5>
            <div class="table-container">
              <table *ngIf="userLoginsCount != 0" class="table user-table">
                <thead>
                  <tr>
                    <td class="width-50"><b>DOMAIN</b></td>
                    <td><b>USER ID</b></td>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let login of userLogins">
                    <td class="">{{ login.DOMAIN }}</td>
                    <td class="">{{ login.USERID }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <br />
        </div>
      </div>
    </div>
  </div>
</div>
