<div fxLayout="column" fxFlex="1 1 auto" class="rightDrawer-notice">
  <div class="search-area">
    <ucap-integrated-search-form
      [searchWord]="!!searchWord ? searchWord : ''"
      (search)="onSearch($event)"
    >
    </ucap-integrated-search-form>
  </div>
  <div style="position: relative;">
    <div
      *ngIf="searchingProcessing"
      style="position: absolute; width: 100%; z-index: 101;"
    >
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    </div>
  </div>
  <div fxFlex="0 0 auto" class="table-box">
    <perfect-scrollbar class="search-scrollbar">
      <table mat-table [dataSource]="searchUserInfos">
        <ng-container matColumnDef="profile">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="profile"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldProfile' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="table-item">
              <div class="profile">
                <span
                  class="presence"
                  [ngClass]="getPresence(element, PresenceType.PC)"
                  [matTooltip]="getPresenceMsg(element)"
                  matTooltipPosition="after"
                ></span>
                <span class="thumbnail-mask">
                  <img
                    class="thumbnail"
                    ucapImage
                    [base]="profileImageRoot"
                    [path]="element.profileImageFile"
                    [default]="'assets/images/img_nophoto_50.png'"
                    (click)="onClickOpenProfile($event, element.seq)"
                  />
                </span>
                <span
                  *ngIf="
                    getPresence(element, PresenceType.MOBILE) === 'mobileOn'
                  "
                  class="text-accent-color marker-mobile-state"
                >
                  <mat-icon>phone_android</mat-icon>
                </span>
              </div>
              <div>
                <span
                  class="work-status"
                  [ngClass]="getWorkstatusInfo(element, 'style')"
                >
                  {{ getWorkstatusInfo(element, 'text') }}
                </span>
                <span class="name">
                  {{ element.name }}
                </span>
              </div>
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="grade">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="grade"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldGrade' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="grade">
            <div class="grade">
              {{ element.grade }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="deptName">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="deptName"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldDeptartment' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="deptName">
              {{ element.deptName }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="companyName">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="companyName"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldCompany' | translate }}
          </th>
          <td mat-cell *matCellDef="let element">
            <div class="companyName">
              {{ element.companyName }}
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="lineNumber">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="lineNumber"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldOfficePhoneNumber' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="lineNumber">
            <div class="lineNumber">
              {{ element.lineNumber }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="hpNumber">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="hpNumber"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldHandphone' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="hpNumber">
            <div class="hpNumber">
              {{ element.hpNumber }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="email">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="email"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldEmail' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="email">
            <div class="email">
              {{ element.email }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="responsibilities">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="responsibilities"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldResponsibilities' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="responsibilities">
            <div class="responsibilities">
              {{ element.responsibilities }}
            </div>
          </td>
        </ng-container>
        <ng-container matColumnDef="workplace">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="workplace"
            (mousedown)="resizeTable($event)"
          >
            {{ 'search.fieldWorkPlace' | translate }}
          </th>
          <td mat-cell *matCellDef="let element" class="workplace">
            <div class="workplace">
              {{ element.workplace }}
            </div>
          </td>
        </ng-container>
        <tr
          mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </perfect-scrollbar>
    <div
      class="no-search-result"
      fxFlexFill
      *ngIf="!searchUserInfos || 0 === searchUserInfos.length"
    >
      {{ 'common.noSearchResult' | translate }}
    </div>
  </div>
  <div class="footer-fix search-result-footer">
    <mat-paginator
      [length]="totalCount"
      [pageSize]="pageListCount"
      [pageSizeOptions]="[10, 20, 30]"
      (page)="onChangePage($event)"
      showFirstLastButtons
    ></mat-paginator>
  </div>
</div>
