<div class="member-list-container" fxLayout="column">
  <!-- content table start-->
  <div class="list-header" fxFlex="0 0 48px" fxLayout="row">
    <div class="list-header-title" fxFlex="1 1 auto">
      <h5>
        <ng-container *ngIf="!!selectedDeptInfo">
          {{ selectedDeptInfo | ucapOrganizationTranslate: 'name' }}
        </ng-container>
        <ng-container *ngIf="!!selectedCompanyInfo">
          {{ selectedCompanyInfo.companyName }}
        </ng-container>
        <strong>{{ searchedProfileLength }}</strong
        >명
      </h5>
    </div>
    <div class="list-header-toolbox" fxFlex="0 0 100px">
      이름
      <button mat-icon-button aria-label="icon" (click)="onClickToggleSort()">
        <mat-icon>format_line_spacing</mat-icon>
      </button>

      <mat-checkbox
        class="subtitle-chk-box"
        #checkboxAll
        (change)="onChangeSelectAll($event)"
      >
      </mat-checkbox>
    </div>
  </div>
  <div fxFlex="1 1 auto" fxLayout="column">
    <div fxFlex="1 1 auto">
      <app-organization-profile-list
        #profileList
        [searchData]="_searchData"
        [selectedUser]="selectedUserInfos"
        [sortOrder]="sortOrderForProfileList"
        (searched)="onSearchedProfileList($event)"
        (changedCheck)="onChangedCheckProfileList($event)"
      >
      </app-organization-profile-list>
    </div>
    <div
      [style.display]="
        selectedUserInfos && 0 < selectedUserInfos.length ? '' : 'none'
      "
      class="selected-users"
      [fxFlex]="isExpanded ? '0 0 200px' : '0 0 40px'"
    >
      <mat-accordion class="organization-accordion">
        <mat-expansion-panel
          (opened)="onOpenedSelection()"
          (closed)="onClosedSelection()"
        >
          <mat-expansion-panel-header
            collapsedHeight="40px"
            expandedHeight="40px"
            class="organization-accordion-head"
          >
            <mat-panel-title class="select-user-title">
              선택한 대화상대
              <strong>{{
                !!selectedUserInfos ? selectedUserInfos.length : 0
              }}</strong>
            </mat-panel-title>
            <mat-panel-description> </mat-panel-description>
          </mat-expansion-panel-header>

          <div class="selected-user-list">
            <ucap-organization-profile-selection-01
              [userInfoList]="selectedUserInfos"
              [removableFor]="removableForSelection"
              [colorFor]="colorForSelection"
              (removed)="onRemovedProfileSelection($event)"
            >
            </ucap-organization-profile-selection-01>
          </div>
          <div class="btn-box">
            <button mat-stroked-button class="mat-basic">
              그룹추가
            </button>
            <button mat-flat-button class="bg-primary-darkest">
              대화
            </button>
            <button mat-flat-button class="bg-primary-dark">
              쪽지
            </button>
            <button mat-flat-button class="bg-primary-dark" disabled>
              전화
            </button>
            <button mat-flat-button class="bg-primary-dark">
              화상
            </button>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>
  <!-- content table end-->
</div>
