<mat-card class="example-card mat-elevation-z">
  <mat-card-header>
    <div class="profile-img">
      <div class="profile-img-mask">
        <img
          ucapImage
          [base]="profileImageRoot"
          [path]="userInfo.profileImageFile"
          [default]="'assets/images/img_nophoto_50.png'"
        />
      </div>

      <button
        mat-mini-fab
        class="mat-elevation-z6 btn-upload-profile-image"
        *ngIf="isMe && editableProfileImage"
        matTooltip="{{ 'profile.changeProfileImage' | translate }}"
        matTooltipPosition="above"
        [disabled]="
          profileImageFileUploadItem &&
          profileImageFileUploadItem.uploadingProgress$
        "
        (click)="profileImageFileInput.click()"
      >
        <span class="mdi mdi-upload mdi-18px"></span>
      </button>

      <span
        *ngIf="getWorkstatus(userInfo).length > 0"
        class="work-status"
        [ngClass]="getWorkstatusStyle(userInfo)"
      >
        {{ getWorkstatus(userInfo) }}
      </span>

      <mat-spinner
        *ngIf="
          profileImageFileUploadItem &&
          profileImageFileUploadItem.uploadingProgress$
        "
        mode="determinate"
        strokeWidth="5"
        diameter="84"
        [value]="profileImageFileUploadItem.uploadingProgress$ | async"
        class="upload-profile-image-spinner"
      >
      </mat-spinner>

      <input
        type="file"
        #profileImageFileInput
        style="display: none"
        (change)="onChangeFileInput()"
      />
    </div>

    <mat-card-title>
      <span class="name">{{ userInfo | ucapTranslate: 'name' }}</span>
      <span class="number">{{ userInfo.employeeNum }}</span>
    </mat-card-title>
    <mat-card-subtitle>
      <span class="deptName">{{ userInfo | ucapTranslate: 'deptName' }}</span>
      <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
    </mat-card-subtitle>

    <div class="intro">
      <ng-container *ngIf="!isMe">
        {{ userInfo.intro }}
      </ng-container>
      <ng-container *ngIf="!!isMe">
        <ucap-inline-edit-input
          (apply)="
            $event.stopPropagation(); onApplyIntroMessage(introMessage.value)
          "
          (edit)="$event.stopPropagation()"
          (cancel)="
            $event.stopPropagation(); introMessage.value = userInfo.intro
          "
          class="form-eidt"
        >
          <span ucapInlineEditInput="view">{{ userInfo.intro }}</span>
          <span ucapInlineEditInput="edit"
            ><input
              matInput
              #introMessage
              type="text"
              maxlength="20"
              [value]="userInfo.intro"
              (click)="$event.stopPropagation()"
          /></span>
        </ucap-inline-edit-input>
      </ng-container>
    </div>

    <div *ngIf="!isMe" class="profile-option">
      <span *ngIf="isBuddy" class="btn-favorite">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          [ngClass]="[isFavorit ? 'on' : '']"
          (click)="onToggleFavorit()"
          matTooltip="{{ 'profile.favorite' | translate }}"
        >
          <polygon
            points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
          ></polygon>
        </svg>
      </span>
      <span class="btn-groupadd">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          class="on"
          *ngIf="getShowBuddyToggleBtn('ADD')"
          (click)="onClickAddBuddy()"
          matTooltip="{{ 'profile.addBuddy' | translate }}"
        >
          <!-- not buddy -->
          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="8.5" cy="7" r="4"></circle>
          <line x1="20" y1="8" x2="20" y2="14"></line>
          <line x1="23" y1="11" x2="17" y2="11"></line>
        </svg>

        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="butt"
          stroke-linejoin="round"
          class="on"
          *ngIf="getShowBuddyToggleBtn('DEL')"
          (click)="onClickDelBuddy()"
          matTooltip="{{ 'profile.removeBuddy' | translate }}"
        >
          <!-- is buddy -->
          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
          <circle cx="8.5" cy="7" r="4"></circle>
          <line x1="23" y1="11" x2="17" y2="11"></line>
        </svg>
      </span>
    </div>
    <!-- <div *ngIf="isMe" class="profile-edit">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
        <path
          d="M12.3 3.7l4 4L4 20H0v-4L12.3 3.7zm1.4-1.4L16 0l4 4-2.3 2.3-4-4z"
        />
      </svg>
    </div> -->
  </mat-card-header>

  <mat-card-content>
    <ul class="userInfo-list">
      <li class="company">
        <dt class="division">{{ 'profile.fieldCompany' | translate }}</dt>
        <dd>{{ userInfo.companyName | ucapStringEmptycheck }}</dd>
      </li>
      <li>
        <dt class="division">
          {{ 'profile.fieldResponsibilities' | translate }}
        </dt>
        <dd>{{ userInfo.responsibilities | ucapStringEmptycheck }}</dd>
      </li>
      <li>
        <dt>{{ 'profile.fieldWorkplace' | translate }}</dt>
        <dd>{{ userInfo.workplace | ucapStringEmptycheck }}</dd>
      </li>
      <li *ngIf="userInfo.job">
        <dt class="division">{{ 'profile.fieldJob' | translate }}</dt>
        <dd>{{ userInfo.job | ucapStringEmptycheck }}</dd>
      </li>
      <li *ngIf="userInfo.customerInfo">
        <dt>{{ 'profile.fieldCustomerInfo' | translate }}</dt>
        <dd>{{ userInfo.customerInfo | ucapStringEmptycheck }}</dd>
      </li>
      <li>
        <dt class="division">{{ 'profile.fieldEmail' | translate }}</dt>
        <dd>{{ userInfo.email | ucapStringEmptycheck }}</dd>
      </li>

      <li>
        <dt class="division">
          {{ 'profile.fieldOfficePhoneNumber' | translate }}
        </dt>
        <dd>
          {{
            userInfo.lineNumber
              | ucapStringFormatterPhone
              | ucapStringEmptycheck
          }}
        </dd>
        <button
          mat-mini-fab
          class="mat-elevation-z userInfo-call"
          *ngIf="!isMe"
          matTooltip="{{ 'profile.fieldOfficePhoneNumber' | translate }}"
          matTooltipPosition="above"
          [disabled]="getDisabledBtn('LINE')"
          (click)="onClickCall('LINE')"
        >
          <svg
            id="레이어_1"
            data-name="레이어 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
          >
            <path
              d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
              C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
              c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06
              c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35
              c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57
              c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z"
            />
          </svg>
        </button>
      </li>
      <li>
        <dt class="division">{{ 'profile.fieldHandphone' | translate }}</dt>
        <dd>
          {{
            userInfo.hpNumber | ucapStringFormatterPhone | ucapStringEmptycheck
          }}
        </dd>
        <button
          mat-mini-fab
          class="mat-elevation-z userInfo-call"
          *ngIf="!isMe"
          matTooltip="{{ 'profile.fieldHandphone' | translate }}"
          matTooltipPosition="above"
          [disabled]="getDisabledBtn('MOBILE')"
          (click)="onClickCall('MOBILE')"
        >
          <svg
            id="레이어_1"
            data-name="레이어 1"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
          >
            <path
              d="M18.61,16.55c-0.42,1.03-2.29,1.97-3.12,2.01c-0.83,0.04-0.85,0.64-5.37-1.32c-4.51-1.96-7.23-6.73-7.45-7.04
            	C2.46,9.9,0.92,7.71,1,5.51c0.08-2.2,1.29-3.24,1.72-3.67c0.43-0.43,0.92-0.51,1.22-0.51c0.36-0.01,0.59-0.01,0.85,0
            	c0.26,0.01,0.66-0.06,1,0.85c0.34,0.91,1.16,3.14,1.26,3.37c0.1,0.23,0.17,0.49,0.01,0.78C6.91,6.63,6.82,6.81,6.59,7.06
            	c-0.24,0.25-0.5,0.57-0.71,0.76C5.65,8.04,5.4,8.27,5.65,8.73c0.25,0.46,1.1,1.96,2.39,3.19c1.66,1.59,3.1,2.11,3.54,2.35
            	c0.44,0.24,0.71,0.21,0.98-0.07c0.27-0.29,1.18-1.26,1.49-1.7c0.32-0.44,0.62-0.35,1.02-0.19c0.41,0.16,2.58,1.33,3.03,1.57
              c0.44,0.24,0.74,0.36,0.84,0.55C19.05,14.62,19.02,15.52,18.61,16.55L18.61,16.55z"
            />
          </svg>
        </button>
      </li>
    </ul>

    <mat-card-actions>
      <div fxFlex fxLayout="row" fxLayoutAlign="space-around center">
        <div class="button-text-item">
          <button
            mat-mini-fab
            class="mat-elevation-z bg-accent-darkest"
            matTooltip="{{
              (isMe ? 'profile.fieldMyTalk' : 'profile.fieldOneToOneTalk')
                | translate
            }}"
            matTooltipPosition="above"
            (click)="onClickOpenChat()"
          >
            <svg
              id="레이어_1"
              data-name="레이어 1"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
            >
              <path
                d="M26.57,14a9.05,9.05,0,0,0-12.82,0,9.07,9.07,0,0,0-.57,12.2,3.57,3.57,0,0,1-1.46,1.61.84.84,0,0,0-.46.89.86.86,0,0,0,.71.71,4.34,4.34,0,0,0,.71.05,5.32,5.32,0,0,0,3.19-1.06A9.07,9.07,0,0,0,26.57,14Z"
                transform="translate(-11.09 -11.32)"
              />
              <path
                d="M20.16,20.53a.14.14,0,0,1-.14-.14.14.14,0,0,1,.14-.14.14.14,0,0,1,.13.14A.13.13,0,0,1,20.16,20.53Z"
                transform="translate(-11.09 -11.32)"
              />
              <path
                class="cls-1"
                d="M20.16,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z"
                transform="translate(-11.09 -11.32)"
              />
              <circle cx="12.35" cy="9.07" r="0.14" />
              <path
                class="cls-1"
                d="M23.44,19.75a.64.64,0,1,0,.64.64.64.64,0,0,0-.64-.64Z"
                transform="translate(-11.09 -11.32)"
              />
              <circle cx="5.78" cy="9.07" r="0.14" />
              <path
                class="cls-1"
                d="M16.88,19.75a.64.64,0,1,0,.63.64.64.64,0,0,0-.63-.64Z"
                transform="translate(-11.09 -11.32)"
              />
            </svg>
          </button>
          <span *ngIf="!isMe" class="button-text">{{
            'profile.fieldOneToOneTalk' | translate
          }}</span>
          <span *ngIf="isMe" class="button-text">{{
            'profile.fieldMyTalk' | translate
          }}</span>
        </div>

        <div class="button-text-item" *ngIf="!isMe">
          <button
            mat-mini-fab
            class="mat-elevation-z"
            *ngIf="!isMe"
            matTooltip="{{ 'profile.fieldSMS' | translate }}"
            matTooltipPosition="above"
            [disabled]="getDisabledBtn('SMS')"
            (click)="onClickSMS()"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path
                d="M2 2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm2 0v14h12V2H4zm6 17a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
              />
            </svg>
          </button>
          <span class="button-text">{{ 'profile.fieldSMS' | translate }}</span>
        </div>

        <div
          class="button-text-item"
          *ngIf="!isMe && !!authInfo && authInfo.canVideoConference"
        >
          <button
            mat-mini-fab
            class="mat-elevation-z bg-accent-darkest"
            *ngIf="!isMe"
            matTooltip="{{ 'profile.fieldVideoConference' | translate }}"
            matTooltipPosition="above"
            (click)="onClickVideoConference()"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path
                d="M16 7l4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
              />
            </svg>
          </button>
          <span class="button-text">{{
            'profile.fieldVideoConference' | translate
          }}</span>
        </div>

        <div class="button-text-item" *ngIf="!isMe">
          <button
            mat-mini-fab
            class="mat-elevation-z bg-accent-darkest"
            *ngIf="!isMe"
            matTooltip="{{ 'profile.fieldMessage' | translate }}"
            matTooltipPosition="above"
            (click)="onClickMessage()"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <path d="M0 0l20 10L0 20V0zm0 8v4l10-2L0 8z" />
            </svg>
          </button>
          <span class="button-text">{{
            'profile.fieldMessage' | translate
          }}</span>
        </div>
      </div>
    </mat-card-actions>
  </mat-card-content>

  <button class="icon-button btn-dialog-close" (click)="onClose()">
    <i class="mdi mdi-window-close"></i>
  </button>
</mat-card>
