<div
  class="oraganization-tab"
  *ngIf="departmentInfoList$ | async"
>
  <div class="oraganization-tab-tree" >
    <ucap-organization-tree
      [oraganizationList]="departmentInfoList$ | async"
      [loginRes]="loginRes"
      (selected)="onSelectedOrganization($event)"
    ></ucap-organization-tree>
  </div>
  <div class="select-list ">
      <dl class="select-dept text-accent-color">
        <dt>
          {{ getSelectedDepartmentName() }}
        </dt>
        <dd>
          <mat-checkbox
            #checkbox
            [checked]="getCheckedAllUser()"
            (change)="onCheckAllUser(checkbox.checked)"
            (click)="$event.stopPropagation()"
          >
          </mat-checkbox>
        </dd>
      </dl>
    <div *ngIf="selectedDepartmentProcessing">
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
    <div class="search-list">
      <cdk-virtual-scroll-viewport
        itemSize="20"
        style="height: 100%;"
      >
        <ucap-profile-user-list-item
          *cdkVirtualFor="let userInfo of selectedDepartmentUserInfoList"
          [userInfo]="userInfo"
          [checkable]="true"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
        >
          Loading...
        </ucap-profile-user-list-item>
      </cdk-virtual-scroll-viewport>
      <!-- <ucap-profile-user-list-item
        *ngFor="let userInfo of selectedDepartmentUserInfoList$ | async"
        [userInfo]="userInfo"
        [checkable]="true"
        [sessionVerinfo]="sessionVerinfo"
        [selectedUserList]="selectedUserList"
        [isChecked]="getCheckedUser(userInfo)"
        (checkUser)="onCheckUser($event)"
      >
      </ucap-profile-user-list-item> -->
    </div>
  </div>
  <div *ngIf="!isUserSelect" class="btn-box">
    <!--선택된 후에는 disabled="true" 빼주세요. -->
    <button
      mat-stroked-button
      class="mat-primary"
      (click)="onClickShowSelectedUserList()"
    >
      선택<span *ngIf="selectedUserList.length > 0"
        >({{ selectedUserList.length }})</span
      >
    </button>
    <ul>
      <li>
        <button mat-flat-button (click)="onClickAddGroup()" class="mat-primary">
          그룹에 추가
        </button>
      </li>
      <li>
        <button mat-flat-button (click)="onClickChatOpen()" class="mat-primary">
          대화
        </button>
      </li>
      <li>
        <button
          mat-flat-button
          (click)="onClickConference()"
          class="mat-primary"
        >
          화상회의
        </button>
      </li>
    </ul>
  </div>
</div>
