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

<div class="content-area">
  @if (loading) {
    <div class="loadingSpinner">
      <span class="spinner"> Loading... </span>
    </div>
  }

  @if (userData && !loading) {
    <div>
      @if (serverType !== ServerType.SasViya) {
        <div 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>
                @if (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>
                }
              </tbody>
            </table>
          </div>
        </div>
      }
      @if (serverType === ServerType.SasViya && userInfo) {
        <div 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">
            @if (serverType === ServerType.Sas9) {
              <div>
                <h3>EMAILS ({{ userEmailsCount || '0' }})</h3>
                @if (userEmailsCount == 0) {
                  <h5>No Emails Present</h5>
                }
                <div class="table-container">
                  @if (userEmailsCount != 0) {
                    <table class="table user-table">
                      <thead>
                        <tr>
                          <td class="width-50"><b>EMAIL</b></td>
                          <td class=""><b>TYPE</b></td>
                        </tr>
                      </thead>
                      <tbody>
                        @for (email of userEmails; track email) {
                          <tr>
                            <td class="">{{ email.EMAIL }}</td>
                            <td class="">{{ email.TYPE }}</td>
                          </tr>
                        }
                      </tbody>
                    </table>
                  }
                </div>
              </div>
            }
            @if (serverType === ServerType.Sas9) {
              <hr />
            }
            <div>
              <h3>GROUPS ({{ userGroupsCount || '0' }})</h3>
              @if (userGroupsCount == 0) {
                <h5>No Groups Present</h5>
              }
              <div class="table-container">
                @if (userGroupsCount != 0) {
                  <table class="table user-table">
                    <tbody>
                      @for (group of userGroups; track group) {
                        <tr>
                          @if (serverType === ServerType.SasViya) {
                            <td
                              [routerLink]="'/view/usernav/groups/' + group.URI"
                              routerLinkActive="active"
                              class=""
                            >
                              {{ group.GROUPNAME }}
                            </td>
                          }
                          @if (serverType !== ServerType.SasViya) {
                            <td
                              [routerLink]="
                                '/view/usernav/groups/' +
                                (group.GROUPURI || group.URI)
                              "
                              routerLinkActive="active"
                              class=""
                            >
                              {{ group.GROUPNAME }}
                            </td>
                          }
                        </tr>
                      }
                    </tbody>
                  </table>
                }
              </div>
            </div>
            @if (serverType === ServerType.Sas9) {
              <hr />
            }
            @if (serverType === ServerType.Sas9) {
              <div>
                <h3>ROLES ({{ userRolesCount || '0' }})</h3>
                @if (userRolesCount == 0) {
                  <h5>No Roles Present</h5>
                }
                <div class="table-container">
                  @if (userRolesCount != 0) {
                    <table class="table user-table">
                      <tbody>
                        @for (role of userRoles; track role) {
                          <tr>
                            <td
                              [routerLink]="
                                '/view/usernav/roles/' +
                                getRoleURI(role.ROLEURI)
                              "
                            >
                              {{ role.ROLENAME }}
                            </td>
                          </tr>
                        }
                      </tbody>
                    </table>
                  }
                </div>
              </div>
            }
            @if (serverType === ServerType.Sas9) {
              <hr />
            }
            @if (serverType === ServerType.Sas9) {
              <div>
                <h3>LOGINS ({{ userLoginsCount || '0' }})</h3>
                @if (userLoginsCount == 0) {
                  <h5>No Logins Present</h5>
                }
                <div class="table-container">
                  @if (userLoginsCount != 0) {
                    <table class="table user-table">
                      <thead>
                        <tr>
                          <td class="width-50"><b>DOMAIN</b></td>
                          <td><b>USER ID</b></td>
                        </tr>
                      </thead>
                      <tbody>
                        @for (login of userLogins; track login) {
                          <tr>
                            <td class="">{{ login.DOMAIN }}</td>
                            <td class="">{{ login.USERID }}</td>
                          </tr>
                        }
                      </tbody>
                    </table>
                  }
                </div>
              </div>
            }
            <br />
          </div>
        </div>
      </div>
    </div>
  }
</div>
