<h1 mat-dialog-title class="prevent-select">Detalles del grupo de trabajo</h1>
<div mat-dialog-content class="prevent-select">
  <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="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError">
    <p><b>Grupo de trabajo #{{ workGroup!.ID_GRUPO }}</b></p>
    <p><b>Nombre: </b>{{ workGroup!.NOMBRE_GRUPO }}</p>
    <p><b>Especialidad: </b>{{ workGroup!.ESPECIALIDAD }}</p>
    <p class="m-0"><b>Equipos de mantenimiento relacionados:</b></p>
    <ul class="m-0">
      <li *ngFor="let team of workGroup!.EQUIPOS_RELACIONADOS_ARR">
        {{ team.NOMBRE_EQUIPO }} - {{ team.ESPECIALIDAD }}
      </li>
    </ul>
    <p class="mt-12"><b>Estado: </b>{{ workGroup!.ESTADO }}</p>
    <p><b>Usuario que registró: </b>{{ workGroup!.USUREG }}</p>
    <p><b>Fecha de registro: </b>{{ workGroup!.FECREG }}</p>
    <p><b>Usuario que modificó: </b>{{ workGroup!.USUMOD == null ? '-' : workGroup!.USUMOD }}</p>
    <p><b>Fecha de modificación: </b>{{ workGroup!.FECMOD == null ? '-' : workGroup!.FECMOD }}</p>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>