<div fxFlexFill>
  <div fxFlex class="container">
    <!-- search start-->
    <div>
      <app-organization-search-for-tenant
        placeholder="이름 부서명, 전화번호, 이메일"
        [(searchData)]="companySearchData"
        (canceled)="onCanceled()"
      >
      </app-organization-search-for-tenant>
    </div>
    <!-- search end-->

    <div *ngIf="!isSearch">
      <form name="inputForm" [formGroup]="inputForm" novalidate>
        <mat-form-field
          hintLabel="금지단어[-,_]"
          style="display: block; margin-bottom: 10px;"
        >
          <input
            matInput
            #input
            maxlength="20"
            placeholder="그룹명을 입력하세요."
            formControlName="groupName"
            (keyup)="onKeyupGroupName()"
          />
          <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
          <!-- <mat-error *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"> -->
          <!-- {{
                          'group.errors.bannedWords'
                            | translate: { bannedWords: appService.bannedGroupNames.join(',') }
                        }} -->
          <!-- 금지단어[-,_] -->
          <!-- </mat-error> -->
          <!-- <mat-error *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"> -->
          <!-- {{ 'group.errors.sameNameExist' | translate }} -->
          <!-- 이미 존재하는 그룹명입니다. -->
          <!-- </mat-error> -->
        </mat-form-field>
      </form>

      <div *ngIf="!!groupList && groupList.length > 0">
        <span>기존 그룹 지정</span>
        <div fxFlexFill class="group-list-container">
          <div *ngFor="let group of groupList">
            <div *ngIf="checkVisible(group)">
              <span>{{ group.name }}</span>
              <div>
                <mat-checkbox
                  #checkbox
                  [checked]="groupChecked"
                  (change)="onCheckForGroup($event.source, group)"
                ></mat-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="!!isSearch" class="search-wrpper" style="height: 400px;">
      <app-group-profile-list
        [searchData]="companySearchData"
        [checkable]="checkable"
        [isDialog]="isDialog"
        (toggleCheck)="onToggleCheck($event)"
      ></app-group-profile-list>
    </div>
  </div>
</div>
