<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">
    @if (orderType == 'P') {
      <p><b>Número de registro: </b>{{ preventiveOrder!.IDREGISTRO }}</p>
      <p><b>Orden de trabajo relacionada: </b>Orden #{{ preventiveOrder!.IDORDEN }}</p>
      <p><b>Tipo de orden de trabajo: </b>{{ preventiveOrder!.TIPOORDEN }}</p>
      <p><b>Fecha de programación: </b>{{ preventiveOrder!.FECHAPROGRAMACION }}</p>
      <p><b>Estado de ejecución: </b>{{ preventiveOrder!.TIPOACCION }}</p>
      <p><b>Fecha de ejecución: </b>{{ preventiveOrder!.FECHAEJECUCION }}</p>
      <p><b>Usuario que ejecutó: </b>{{ preventiveOrder!.USUARIOEJECUCION }}</p>
      <p *ngIf="preventiveOrder!.TIPOACCION == 'Finalizado'"><b>Fecha de finalización: </b>{{ preventiveOrder!.FECHAFINALIZACION }}</p>
      <p *ngIf="preventiveOrder!.TIPOACCION == 'Finalizado'"><b>Usuario que finalizó: </b>{{ preventiveOrder!.USUARIOFINALIZO }}</p>
      <p *ngIf="preventiveOrder!.TIPOACCION == 'Finalizado'"><b>Duración de la ejecución: </b>{{ preventiveOrder!.TIEMPOEJECUCION }} h</p>
      <p><b>Observaciones: </b>{{ preventiveOrder!.OBSERVACIONES }}</p>
    } @else {
      <p><b>Orden de trabajo: </b>{{ correctiveOrder!.ID_ORDEN }}</p>
      <p><b>Tipo de orden de trabajo: </b>Correctivo</p>
      <p><b>Estado de ejecución: </b>{{ correctiveOrder!.ESTADO }}</p>
      <p><b>Fecha de ejecución: </b>{{ correctiveOrder!.FECHA_INICIO }}</p>
      <p><b>Usuario que ejecutó: </b>{{ correctiveOrder!.USUREG }}</p>
      <p><b>Tipo de activación: </b>{{ correctiveOrder!.TIPO_ACTIVACION }}</p>
      <p><b>Fecha de finalización: </b>{{ correctiveOrder!.FECHA_FINAL == null ? '-' : correctiveOrder!.FECHA_FINAL }}</p>
      <p><b>Usuario que finalizó: </b>{{ correctiveOrder!.USUMOD == null ? '-' : correctiveOrder!.USUMOD }}</p>
      <p><b>Duración de la intervención: </b>{{ correctiveOrder!.DURACION_TOTAL == null ? '-' : correctiveOrder!.DURACION_TOTAL }} h</p>
      <p><b>Comentarios: </b>{{ correctiveOrder!.COMENTARIOS == null ? '-' : correctiveOrder!.COMENTARIOS }}</p>
    }
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>