<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title
      cdkDrag
      cdkDragRootElement=".cdk-overlay-pane"
      cdkDragHandle
      class="card-header"
      >{{ 'search.label' | translate }}</mat-card-title
    >
    <button class="icon-button btn-dialog-close" (click)="onCancel()">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <div
      fxLayout="column"
      fxFlex="1 1 auto"
      class="rightDrawer-notice"
      style="position: relative;"
    >
      <div class="search-area">
        <ucap-integrated-search-form
          [searchWord]="!!currentSearchWord ? currentSearchWord : ''"
          (search)="onSearch($event)"
        >
        </ucap-integrated-search-form>
        <div class="organization-option selectbox">
          <mat-form-field>
            <mat-label>{{ 'search.fieldCompany' | translate }}</mat-label>
            <mat-select
              #filterCompany
              [formControl]="fcCompany"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ fcCompany.value ? fcCompany.value[0] : '' }}
                <span
                  *ngIf="fcCompany.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcCompany.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let option of filterCompanyOption"
                [value]="option"
                >{{ option }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label>{{ 'search.fieldGrade' | translate }}</mat-label>
            <mat-select
              #filterGrade
              [formControl]="fcGrade"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ fcGrade.value ? fcGrade.value[0] : '' }}
                <span
                  *ngIf="fcGrade.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcGrade.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let option of filterGradeOption"
                [value]="option"
                >{{ option }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label>{{ 'search.fieldWorkPlace' | translate }}</mat-label>
            <mat-select
              #filterWorkPlace
              [formControl]="fcWorkPlace"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ fcWorkPlace.value ? fcWorkPlace.value[0] : '' }}
                <span
                  *ngIf="fcWorkPlace.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcWorkPlace.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option
                *ngFor="let option of filterWorkPlaceOption"
                [value]="option"
                >{{ option }}</mat-option
              >
            </mat-select>
          </mat-form-field>
          <mat-form-field>
            <mat-label>{{ 'presence.label' | translate }}</mat-label>
            <mat-select
              #filterPresence
              [formControl]="fcPresence"
              multiple
              (openedChange)="onOpenedChange($event)"
            >
              <mat-select-trigger>
                {{ setFilterOptionSelectedTextPresence() }}
                <span
                  *ngIf="fcPresence.value?.length > 1"
                  class="example-additional-selection"
                >
                  (+{{
                    'search.andOthers'
                      | translate: { count: fcPresence.value.length - 1 }
                  }})
                </span>
              </mat-select-trigger>
              <mat-option [value]="StatusCode.OnLine">{{
                'presence.online' | translate
              }}</mat-option>
              <mat-option [value]="StatusCode.Away">{{
                'presence.away' | translate
              }}</mat-option>
              <mat-option [value]="StatusCode.Busy">{{
                'presence.statusMessage1' | translate
              }}</mat-option>
              <mat-option [value]="StatusCode.Offline">{{
                'presence.offline' | translate
              }}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <div class="content-area">
        <div
          *ngIf="searchingProcessing$ | async"
          style="position: absolute; width: 100%; z-index: 101;"
        >
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </div>

        <div class="contents-table" fxFlex="1 1 100%" fxLayout="column">
          <div class="table-box">
            <ucap-organization-detail-table
              [loginRes]="loginRes"
              [presence$]="presenceSubject.asObservable()"
              [departmentUserInfoList]="departmentUserInfoList"
              [profileImageRoot]="profileImageRoot"
              [selectedUserList]="selectedUserList"
              (openProfile)="onClickOpenProfile($event)"
              (toggleAllUser)="onToggleAllUser($event)"
              (toggleUser)="onToggleUser($event)"
              (sendCall)="onClickCall($event)"
              class="integrate-search-org detail-table"
            ></ucap-organization-detail-table>
          </div>

          <div
            class="footer-fix search-result-footer"
            fxFlex="auto"
            fxLayout="column"
          >
            <mat-accordion>
              <mat-expansion-panel hideToggle>
                <mat-expansion-panel-header>
                  <mat-panel-title class="select-user-title">
                    {{ 'organization.selectedUser' | translate }}
                    <span *ngIf="selectedUserList.length > 0">
                      ({{ selectedUserList.length }})
                      {{ 'common.units.persons' | translate }}
                    </span>
                  </mat-panel-title>
                  <mat-panel-description> </mat-panel-description>
                </mat-expansion-panel-header>

                <div class="list-chip">
                  <mat-chip-list aria-label="User selection">
                    <mat-chip
                      *ngFor="let userInfo of selectedUserList"
                      (removed)="onClickDeleteUser(userInfo)"
                    >
                      {{ userInfo.name }}
                      <mat-icon matChipRemove>clear</mat-icon>
                    </mat-chip>
                  </mat-chip-list>
                </div>
                <div class="btn-box">
                  <ul>
                    <li>
                      <button
                        mat-flat-button
                        [disabled]="
                          selectedUserList.length > 0 ? 'false' : 'true'
                        "
                        (click)="onClickAddGroup()"
                        class="mat-primary"
                      >
                        {{ 'organization.addToGroup' | translate }}
                      </button>
                    </li>
                    <li>
                      <button
                        mat-flat-button
                        [disabled]="
                          selectedUserList.length > 0 ? 'false' : 'true'
                        "
                        (click)="onClickChatOpen()"
                        class="mat-primary"
                      >
                        {{ 'organization.startChat' | translate }}
                      </button>
                    </li>
                    <li *ngIf="!!authInfo && authInfo.canVideoConference">
                      <button
                        mat-flat-button
                        [disabled]="
                          selectedUserList.length > 0 ? 'false' : 'true'
                        "
                        (click)="onClickConference()"
                        class="mat-primary"
                      >
                        {{ 'organization.startVideoConference' | translate }}
                      </button>
                    </li>
                    <li>
                      <button
                        mat-flat-button
                        [disabled]="
                          selectedUserList.length > 0 ? 'false' : 'true'
                        "
                        (click)="onClickMessage()"
                        class="mat-primary"
                      >
                        {{ 'organization.startMessage' | translate }}
                      </button>
                    </li>
                  </ul>
                </div>
              </mat-expansion-panel>
            </mat-accordion>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <ul class="">
          <li>
            <button mat-flat-button (click)="onCancel()" class="mat-primary">
              {{ 'search.clearAndColse' | translate }}
            </button>
          </li>
          <li>
            <button mat-flat-button (click)="onClickHide()" class="mat-primary">
              {{ 'search.fold' | translate }}
            </button>
          </li>
        </ul>
      </div>
    </div>
  </mat-card-content>
</mat-card>