<div
  class="user-list line-top"
  *ngIf="userInfo"
  (mouseover)="onMouseover($event)"
  (mouseleave)="onMouseleave($event)"
>
  <div class="user-profile-info">
    <div
      class="user-profile-thumb"
      [ngClass]="
        getPresence(PresenceType.MOBILE) === 'online' ? 'mobile-ing' : ''
      "
    >
      <!-- 모바일이 온라인일 경우 + mobile-ing -->
      <span
        class="presence"
        [ngClass]="getPresence(PresenceType.PC)"
        [matTooltip]="getPresenceMsg()"
        matTooltipPosition="after"
      >
      </span>
      <!-- 기본값:온라인, +offline:오프라인, +absence:부재중, +other-business:다른용무 -->
      <!-- <span class="ucap-organization-profile-list-item-presence">bullet</span> -->
      <div class="profile-image">
        <img
          class="thumbnail"
          ucapImage
          [base]="profileImageRoot"
          [path]="userInfo.profileImageFile"
          [default]="defaultProfileImage"
          (click)="onClickProfileImage($event, userInfo)"
        />
      </div>
    </div>
    <div class="user-info">
      <div>
        <div class="user-name">
          {{ userInfo | ucapOrganizationTranslate: 'name' }}
        </div>
        <div class="user-grade">
          {{ userInfo | ucapOrganizationTranslate: 'grade' }}
        </div>
      </div>
      <div class="dept-name">
        {{ userInfo | ucapOrganizationTranslate: 'deptName' }}
      </div>
    </div>
  </div>
  <div *ngIf="!isShowMenu && userInfo.nickName === ''" class="intro">
    {{ userInfo.intro }}
  </div>
  <div *ngIf="!isShowMenu && userInfo.nickName !== ''" class="intro">
    {{ userInfo.nickName }}
  </div>

  <div *ngIf="isShowMenu || isClickMore" class="btn-partner-set">
    <button
      mat-icon-button
      aria-label="chat"
      (click)="onClickProfileContextMenu($event, 'CHAT')"
    >
      <img src="../../../assets/images/ico/btn_lise_chat_a24.svg" alt="" />
    </button>
    <button
      mat-icon-button
      aria-label="message"
      (click)="
        $event.stopPropagation(); onClickProfileContextMenu($event, 'CHAT')
      "
    >
      <img src="../../../assets/images/ico/btn_list_message_a24.svg" alt="" />
    </button>
    <!-- <button mat-icon-button aria-label="mobile" *ngIf="getDisabledBtn('MOBILE')" (click)="onClickProfileContextMenu('CHAT')">
        <img src="../../../assets/images/ico/btn_list_mobile_a24.svg" alt="" />
      </button>
      <button mat-icon-button aria-label="call" *ngIf="getDisabledBtn('LINE')" (click)="onClickProfileContextMenu('CHAT')">
        <img src="../../../assets/images/ico/btn_list_call_a24.svg" alt="" />
      </button>
      <button mat-icon-button aria-label="vc" *ngIf="getDisabledBtn('VC')"(click)="onClickProfileContextMenu('CHAT')">
        <img src="../../../assets/images/ico/btn_list_vc-a24.svg" alt="" />
      </button> -->
    <button
      mat-icon-button
      aria-label="more"
      *ngIf="true"
      (click)="onClickMore($event)"
    >
      <mat-icon>more_horiz</mat-icon>
    </button>
  </div>
  <div *ngIf="checkable">
    <mat-checkbox
      #checkbox
      [checked]="isChecked"
      (change)="onChangeCheck(checkbox.checked, userInfo)"
    ></mat-checkbox>
  </div>
</div>
