<div class="main-profile">
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="profileImage" style="background-size: cover;">
        <img
          src="https://material.angular.io/assets/img/examples/shiba2.jpg"
          style="width: 50px; height: auto;"
        />
      </div>
      <mat-card-title class="name"
        >{{ userInfo.name }}
        <span class="grade">{{ userInfo.grade }}</span></mat-card-title
      >
      <mat-card-subtitle>({{ userInfo.nameEn }})</mat-card-subtitle>
      <mat-card-subtitle><span>O</span>온라인</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <ng-container *ngIf="isMe; then isMe; else other"></ng-container>

      <ng-template #isMe>
        <div class="intro">
          <mat-form-field class="example-full-width">
            <mat-label>이름 부서명, 전화번호, 이메일</mat-label>
            <input matInput placeholder="인트로" value="" />
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>
        </div>
      </ng-template>
      <ng-template #other>
        <mat-card-actions>
          <button mat-button class="info" aria-label="메세지">메세지</button>
          <button mat-button class="theme" aria-label="쪽지">쪽지</button>
          <button mat-button class="theme" aria-label="휴대폰">휴대폰</button>
          <button mat-button class="theme" aria-label="콜">콜</button>
          <button mat-button class="theme" aria-label="화상회의">
            화상회의
          </button>
        </mat-card-actions>
      </ng-template>

      <div class="user-profile-info-list">
        <ul>
          <li class="company">
            <label>{{ 'profile.labels.company' | ucapI18n }}</label
            >{{ userInfo.companyName }}
          </li>
          <li class="dept">
            <label>{{ 'profile.labels.deptartment' | ucapI18n }}</label
            >{{ userInfo.deptName }}
          </li>
          <li class="email">
            <label>{{ 'profile.labels.email' | ucapI18n }}</label
            >{{ userInfo.email }}
          </li>
          <li class="office">
            <label>{{ 'profile.labels.officePhoneNumber' | ucapI18n }}</label
            >{{ userInfo.lineNumber }}
          </li>
          <li class="mobile">
            <label>{{ 'profile.labels.handphone' | ucapI18n }}</label
            >{{ userInfo.hpNumber }}
          </li>
        </ul>
      </div>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button class="info">info</button>
      <button mat-button class="theme">theme1</button>
      <button mat-button class="theme">theme2</button>
      <button mat-button class="theme checked">theme3</button>
    </mat-card-actions>
  </mat-card>
</div>
