<div *ngIf="showTitle">
  <div class="current-head">
    <h3>{{ 'organization.chart' | translate }}</h3>
  </div>
  <ucap-organization-tenant-search
    [companyList]="companyList$ | async"
    [companyCode]="companyCode"
    (keyDownEnter)="onKeyDownEnterOrganizationTenantSearch($event)"
    (cancel)="onClickCancel()"
  >
  </ucap-organization-tenant-search>
</div>
<div class="oraganization-tab">
  <div class="oraganization-tab-tree">
    <ucap-organization-tree
      [oraganizationList]="departmentInfoList$ | async"
      [loginRes]="loginRes"
      (selected)="onSelectedOrganization($event)"
      class="tab-tree-frame"
    ></ucap-organization-tree>
  </div>
  <div class="select-list">
    <dl class="select-dept">
      <dt>
        <ng-container *ngIf="!isShowSearch">
          <ng-container
            *ngIf="
              !!selectedDepartmentProcessing || !selectedDepartmentName;
              else useSelectedDepartmentName
            "
          >
            {{ 'common.messages.searching' | translate }} ...
          </ng-container>
          <ng-template #useSelectedDepartmentName>
            {{ selectedDepartmentName | ucapTranslate: 'name' }}
          </ng-template>
        </ng-container>
        <ng-container *ngIf="isShowSearch">
          {{ 'common.searchResult' | translate
          }}<span class="text-accent-color"
            >({{ searchUserInfos.length }}
            {{ 'common.units.persons' | translate }})</span
          >
        </ng-container>
      </dt>
      <dd>
        <mat-checkbox
          #checkbox
          [checked]="getCheckedAllUser()"
          (change)="onCheckAllUser(checkbox.checked)"
          (click)="$event.stopPropagation()"
        >
        </mat-checkbox>
      </dd>
    </dl>
    <div style="position: relative;">
      <div
        *ngIf="selectedDepartmentProcessing"
        style="position: absolute; width: 100%;"
      >
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      </div>
    </div>
    <div *ngIf="!isShowSearch" class="search-list">
      <virtual-scroller
        #vsDeptUser
        [items]="selectedDepartmentUserInfoList"
        perfectScrollbar
        fxFlexFill
      >
        <ucap-profile-user-list-item
          *ngFor="let userInfo of vsDeptUser.viewPortItems"
          [userInfo]="userInfo"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
          [checkable]="userInfo.seq !== loginRes.userSeq"
          [checkDisabled]="!getCheckableUser(userInfo)"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
          (openProfile)="onClickOpenProfile($event)"
          (click)="onToggleUser(userInfo)"
          (contextmenu)="onContextMenuOrgUser($event, userInfo)"
          [matTooltip]="getTooltip(userInfo)"
          matTooltipShowDelay="500"
          matTooltipPosition="after"
        >
        </ucap-profile-user-list-item>
      </virtual-scroller>
    </div>
    <div *ngIf="isShowSearch" class="search-result">
      <virtual-scroller
        #vsDeptSearchUser
        [items]="searchUserInfos"
        perfectScrollbar
        fxFlexFill
      >
        <ucap-profile-user-list-item
          *ngFor="let userInfo of vsDeptSearchUser.viewPortItems"
          [userInfo]="userInfo"
          [checkable]="userInfo.seq !== loginRes.userSeq"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
          (openProfile)="onClickOpenProfile($event)"
          (click)="onToggleUser(userInfo)"
          (contextmenu)="onContextMenuOrgUser($event, userInfo)"
          [matTooltip]="getTooltip(userInfo)"
          matTooltipShowDelay="500"
          matTooltipPosition="after"
        >
        </ucap-profile-user-list-item>
      </virtual-scroller>
    </div>
  </div>
  <div *ngIf="!isUserSelect" class="btn-box">
    <button
      mat-stroked-button
      [disabled]="selectedUserList.length > 0 ? 'false' : 'true'"
      class="mat-primary"
      (click)="onClickShowSelectedUserList()"
    >
      {{ 'common.messages.select' | translate
      }}<span *ngIf="selectedUserList.length > 0"
        >({{ selectedUserList.length }})</span
      >
    </button>
    <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>
    </ul>
  </div>
</div>

<div
  style="visibility: hidden; position: fixed"
  [style.left]="orgUserContextMenuPosition.x"
  [style.top]="orgUserContextMenuPosition.y"
  #orgUserContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="orgUserContextMenu"
></div>
<mat-menu #orgUserContextMenu="matMenu">
  <ng-template matMenuContent let-userInfo="userInfo">
    <button
      mat-menu-item
      *ngIf="getShowCall('CALL_LINE', userInfo)"
      [disabled]="getEnableCall()"
      (click)="onClickContextMenu('CALL_LINE', userInfo)"
    >
      {{ 'organization.makeExtensionCall' | translate }}
    </button>
    <button
      mat-menu-item
      *ngIf="getShowCall('CALL_MOBILE', userInfo)"
      [disabled]="getEnableCall()"
      (click)="onClickContextMenu('CALL_MOBILE', userInfo)"
    >
      {{ 'organization.makeMobileCall' | translate }}
    </button>
    <button
      mat-menu-item
      (click)="onClickContextMenu('SEND_MESSAGE', userInfo)"
    >
      {{ 'organization.sendMessage' | translate }}
    </button>
    <button mat-menu-item (click)="onClickContextMenu('SEND_SMS', userInfo)">
      {{ 'organization.sendSMS' | translate }}
    </button>
  </ng-template>
</mat-menu>
