<div fxFlexFill class="sidenav-container">
  <div class="chat-header">
    <h3>{{ 'label.chat' | ucapI18n }}</h3>
    <div class="chat-menu-btn">
      <button
        mat-icon-button
        aria-label="exit-room"
        (click)="onToggleChackable(true)"
      >
        <mat-icon>exit_to_app</mat-icon>
      </button>
      <button
        mat-icon-button
        aria-label="exit-close"
        *ngIf="checkable"
        (click)="onToggleChackable(false)"
      >
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </div>
  <app-sections-chat-search
    (keyDownEnter)="onKeyDownSearch($event)"
    (searchCancel)="onClickCancel()"
    [style.display]="checkable ? 'none' : 'block'"
  ></app-sections-chat-search>
  <div class="exitRoomInfo" *ngIf="checkable">
    <div>
      <strong>{{ this.selectedRoomList.length }}</strong
      >/{{
        !!this.searchObj.isShowSearch
          ? this.searchResultList.length
          : this.roomList.length
      }}
    </div>
    <div>
      <mat-checkbox
        #allCheck
        aria-label="all select exit room "
        [checked]="getCheckedAllItem()"
        (change)="onToggleAllItem(allCheck.checked)"
        (click)="$event.stopPropagation()"
      >
        전체선택
      </mat-checkbox>
    </div>
  </div>
  <app-sections-chat-list
    fxFlexFill
    [searchObj]="searchObj"
    [checkable]="checkable"
    [selectedRoomList]="selectedRoomList"
    (searchResultList)="onSearchResultList($event)"
    (toggleItem)="onToggleItem($event)"
  ></app-sections-chat-list>
</div>
