<h1 mat-dialog-title class="prevent-select">Detalles orden de mantenimiento preventivo</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="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError">
    <p><b>Orden de mantenimiento preventivo #{{ workOrder!.IDORDEN }}</b></p>
    <p><b>Descripción: </b>{{ workOrder!.DESCRIPCION }}</p>
    <p class="m-0"><b>Instrucciones:</b></p>
    <ul class="m-0">
      <li *ngFor="let instruction of workOrder!.INSTRUCCIONES_ARR">
        {{ instruction.INSTRUCCION }}. Inicio: {{ instruction.INICIO }}. Fin: {{ instruction.FIN }}. Duración: {{ instruction.DURACION }}h
      </li>
    </ul>
    <p class="mt-12"><b>Equipamiento: </b>{{ workOrder!.TIPO_EQUIPAMIENTO }} - {{ workOrder!.MODELO_EQUIPAMIENTO }}</p>
    <p><b>Fecha y hora de inicio: </b>{{ workOrder!.FECHAINICIO }}</p>
    <p><b>Fecha y hora final: </b>{{ workOrder!.FECHAFINAL == null ? '-' : workOrder!.FECHAFINAL }}</p>
    <p class="m-0"><b>Análisis presupuestario:</b></p>
    <ul class="m-0">
      <li *ngIf="workOrder!.ANALISIS == null">Sin configurar</li>
    </ul>
    <p class="mt-12"><b>Clasificación: </b>{{ workOrder!.CLASIFICACION }}</p>
    <p><b>Duración total estimada: </b>{{ workOrder!.DURACIONTOTAL }}h</p>
    <p><b>Tiempo de inmovilización estimado: </b>{{ workOrder!.TIEMPOINMOESTI }}h</p>
    <p class="m-0"><b>Personal requerido:</b></p>
    <ul class="m-0">
      <li *ngFor="let item of workOrder!.OPERARIOS_ARR">
        {{ item.NAME }}: {{ item.CANT }} operarios requeridos.
      </li>
    </ul>
    <p class="m-0"><b>Recursos requeridos:</b></p>
    <ul class="m-0">
      <li *ngFor="let item of workOrder!.RECURSOS_ARR">
        {{ item.NAME }} - {{ item.TYPE == 'S' ? 'Refacción' : 'Herramienta' }}: {{ item.REQ }} {{ item.UNIT }}.
      </li>
    </ul>
    <p class="m-0"><b>Documentos requeridos:</b></p>
    <ul class="m-0">
      <li *ngIf="workOrder!.DOCUMENTOS_ARR.length == 0">Sin documentos.</li>
      <li *ngFor="let item of workOrder!.DOCUMENTOS_ARR">
        {{ item.name }} - {{ item.size }}
      </li>
    </ul>
    <p class="mt-12"><b>Prioridad: </b><span style="font-weight: 500;" [style.color]="workOrder!.PRIORIDAD_OBJ!.color">
      {{ workOrder!.PRIORIDAD_OBJ!.label }}
    </span></p>
    <p><b>Estado: </b>{{ workOrder!.ESTADO }}</p>
    <p><b>Usuario que realizó el registro: </b>{{ workOrder!.USUARIOREGISTRA }}</p>
    <p><b>Fecha de registro: </b>{{ workOrder!.FECHAREGISTRO }}</p>
    <p><b>Usuario que modificó: </b>{{ workOrder!.USUARIOMODIFICA == null ? '-' : workOrder!.USUARIOMODIFICA }}</p>
    <p><b>Fecha de modificación: </b>{{ workOrder!.FECHAMODIFICACION == null ? '-' : workOrder!.FECHAMODIFICACION }}</p>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button (click)="printOrderDetails()">Imprimir PDF</button>
  <a class="hidden" target="_blank" id="download"></a>
</div>