<div class="table-header">
  <div class="title">
    {{ selectedDeptInfo | ucapOrganizationTranslate: 'name'
    }}<strong>{{
      !!searchObj.isShowSearch
        ? searchUserList.length
        : departmentUserList.length
    }}</strong
    >{{ 'common.units.persons' | ucapI18n }}
  </div>
  <div class="sort">
    <mat-form-field class="example-full-width" appearance="none">
      <mat-select placeholder="이름">
        <mat-option value="searchItem">
          전체
        </mat-option>
        <mat-option value="searchItem1">
          전체1
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <mat-checkbox
    #checkboxAll
    [checked]="getCheckedAllUser()"
    (change)="onCheckAllUser(checkboxAll.checked)"
    (click)="$event.stopPropagation()"
  >
  </mat-checkbox>
</div>
<div class="table-body" fxFlexFill>
  <cdk-virtual-scroll-viewport #cvsvList perfectScrollbar fxFlexFill>
    <ucap-organization-profile-list-item-01
      *cdkVirtualFor="
        let userInfo of !!searchObj.isShowSearch
          ? searchUserList
          : departmentUserList
      "
      [userInfo]="userInfo"
      [checkable]="loginRes?.userSeq !== userInfo.seq"
      [checked]="getCheckedUser(userInfo)"
      (openProfile)="onOpenProfile($event)"
      (changeCheck)="onToggleUser($event)"
    >
      <ucap-organization-profile-image-01
        ucapOrganizationProfileListItem01="profileImage"
        [userInfo]="userInfo"
        [profileImageRoot]="versionInfo2Res?.profileRoot"
        defaultProfileImage="assets/images/ico/img_nophoto.svg"
      >
      </ucap-organization-profile-image-01>
    </ucap-organization-profile-list-item-01>
  </cdk-virtual-scroll-viewport>
</div>
<div class="selected-users">
  <mat-accordion class="organization-accordion">
    <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title class="select-user-title">
          {{ 'label.selectedUsers' | ucapI18n }}
          <strong>{{ selectedUserList.length }}</strong>
        </mat-panel-title>
        <mat-panel-description>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="24"
            viewBox="0 0 24 24"
            width="24"
            class="indicator"
          >
            <path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" />
            <path d="M0 0h24v24H0z" fill="none" />
          </svg>
        </mat-panel-description>
      </mat-expansion-panel-header>

      <div class="selected-user-list">
        <mat-chip-list aria-label="User selection">
          <perfect-scrollbar
            [config]="{ suppressScrollX: true }"
            class="selected-user-list-chip"
          >
            <mat-chip
              *ngFor="let userInfo of selectedUserList"
              (removed)="onClickDeleteUserChips(userInfo)"
            >
              {{ userInfo.name }}
              <mat-icon matChipRemove>clear</mat-icon>
            </mat-chip>
          </perfect-scrollbar>
        </mat-chip-list>
      </div>
      <div class="btn-box">
        <ul>
          <li>
            <button
              mat-flat-button
              [disabled]="
                !!selectedUserList && selectedUserList.length > 0
                  ? 'false'
                  : 'true'
              "
              (click)="onClickAddGroup()"
              class="mat-primary"
            >
              {{ 'label.addGroup' | ucapI18n }}
            </button>
          </li>
          <li>
            <button
              mat-flat-button
              [disabled]="
                !!selectedUserList && selectedUserList.length > 0
                  ? 'false'
                  : 'true'
              "
              (click)="onClickChatOpen()"
              class="mat-primary"
            >
              {{ 'label.chat' | ucapI18n }}
            </button>
          </li>
          <li>
            <button
              mat-flat-button
              [disabled]="
                !!selectedUserList && selectedUserList.length > 0
                  ? 'false'
                  : 'true'
              "
              (click)="onClickMessage()"
              class="mat-primary"
            >
              {{ 'label.message' | ucapI18n }}
            </button>
          </li>
          <li>
            <button
              mat-flat-button
              [disabled]="
                !!selectedUserList && selectedUserList.length === 1
                  ? 'false'
                  : 'true'
              "
              (click)="onClickCall()"
              class="mat-primary"
            >
              {{ 'label.call' | ucapI18n }}
            </button>
          </li>
          <li *ngIf="!!authRes?.canVideoConference">
            <button
              mat-flat-button
              [disabled]="
                !!selectedUserList && selectedUserList.length > 0
                  ? 'false'
                  : 'true'
              "
              (click)="onClickConference()"
              class="mat-primary"
            >
              {{ 'label.videoConference' | ucapI18n }}
            </button>
          </li>
        </ul>
      </div>
    </mat-expansion-panel>
  </mat-accordion>
</div>
