<h1 mat-dialog-title>Mi perfil</h1>
<div mat-dialog-content>
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="profile-content" *ngIf="!isLoading && !hasError">
    <h2><b>ID usuario:</b> {{ userInfo!.IDUSUARIO }}</h2>
    <h2><b>Nombre completo:</b> {{ buildName(userInfo!.NOMBRE, userInfo!.APEPAT, userInfo!.APEMAT) }}</h2>
    <h2><b>Correo electrónico:</b> {{ userInfo!.EMAIL }}</h2>
    <h2><b>Perfil:</b> {{ userInfo!.PERFNOMB }} ({{ userInfo!.PERFIL }})</h2>
    <h2><b>Estatus:</b> {{ userInfo!.ESTATUS }}</h2>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>