<h1 mat-dialog-title class="prevent-select">{{ title }}</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 pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="animated fadeIn dialog_details_column" *ngIf="!isLoading && !hasError">
    <p><b>Número de registro: </b>{{ orderExecution!.IDREGISTRO }}</p>
    <p><b>Orden de trabajo relacionada: </b>Orden #{{ orderExecution!.IDORDEN }}</p>
    <p><b>Tipo de orden de trabajo: </b>{{ orderExecution!.TIPOORDEN }}</p>
    <p><b>Fecha de programación: </b>{{ orderExecution!.FECHAPROGRAMACION }}</p>
    <p><b>Estado de ejecución: </b>{{ orderExecution!.TIPOACCION }}</p>
    <p><b>Fecha de ejecución: </b>{{ orderExecution!.FECHAEJECUCION }}</p>
    <p><b>Usuario que ejecutó: </b>{{ orderExecution!.USUARIOEJECUCION }}</p>
    <p *ngIf="orderExecution!.TIPOACCION == 'Finalizado'"><b>Fecha de finalización: </b>{{ orderExecution!.FECHAFINALIZACION }}</p>
    <p *ngIf="orderExecution!.TIPOACCION == 'Finalizado'"><b>Usuario que finalizó: </b>{{ orderExecution!.USUARIOFINALIZO }}</p>
    <p *ngIf="orderExecution!.TIPOACCION == 'Finalizado'"><b>Duración de la ejecución: </b>{{ orderExecution!.TIEMPOEJECUCION }} h</p>
    <p><b>Observaciones: </b>{{ orderExecution!.OBSERVACIONES }}</p>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>