<h1 mat-dialog-title class="prevent-select">Detalles de la orden de mantenimiento preventivo #{{ idOrder }}</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 *ngIf="!isLoading && !hasError" class="animated fadeIn order-grid-list">
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Descripción
      </div>
      <div class="cell-content">
        {{ workOrder!.DESCRIPCION }}
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Instrucciones
      </div>
      <div class="cell-content">
        <div *ngFor="let item of getInstructionsArr(workOrder!.INSTRUCCIONES); let i = index">
          {{ i + 1 }}.- {{ item }}<br *ngIf="i < getInstructionsArr(workOrder!.INSTRUCCIONES).length - 1">
        </div>
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Equipamiento relacionado
      </div>
      <div class="cell-content">
        {{ workOrder!.EQUIPAMIENTO }}
      </div>
    </div>
    <div class="order-grid-cell ogw-50 border-right border-bottom">
      <div class="cell-label">
       Fecha y hora de inicio
      </div>
      <div class="cell-content">
        {{ getDateText(workOrder!.FECHAINICIO) }} a las {{ workOrder!.HORAINICIO }}
      </div>
    </div>
    <div class="order-grid-cell ogw-50 border-bottom">
      <div class="cell-label">
       Fecha y hora final
      </div>
      <div class="cell-content">
        {{ workOrder!.FECHAFINAL == '' ? '-' : getDateText(workOrder!.FECHAINICIO) + ' a las ' + workOrder!.HORAFINAL }}
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Análisis presupuestario
      </div>
      <div class="cell-content">
        {{ workOrder!.ANALISIS == null ? 'Sin configuración' : workOrder!.ANALISIS }}
      </div>
    </div>
    <div class="order-grid-cell ogw-34 border-right border-bottom">
      <div class="cell-label">
        Clasificación
      </div>
      <div class="cell-content">
        {{ workOrder!.CLASIFICACION }}
      </div>
    </div>
    <div class="order-grid-cell ogw-33 border-right border-bottom">
      <div class="cell-label">
        Duración total estimada
      </div>
      <div class="cell-content">
        {{ workOrder!.DURACIONTOTAL }} horas
      </div>
    </div>
    <div class="order-grid-cell ogw-33 border-bottom">
      <div class="cell-label">
        Tiempo de inmovilización estimado
      </div>
      <div class="cell-content">
        {{ workOrder!.TIEMPOINMOESTI }} horas
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Personal involucrado
      </div>
      <div class="cell-content">
        <div *ngFor="let item of getPersArr(workOrder!.PERSONAL, workOrder!.OPERARIOS); let i = index">
          <span>&#8226;</span> {{ item }}<br *ngIf="i < getPersArr(workOrder!.PERSONAL, workOrder!.OPERARIOS).length - 1">
        </div>
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Recursos requeridos
      </div>
      <div class="cell-content">
        <div *ngFor="let item of getResourcesArr(workOrder!.RECURSOS); let i = index">
          <span>&#8226;</span> {{ item }}<br *ngIf="i < getResourcesArr(workOrder!.RECURSOS).length - 1">
        </div>
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Documentos requeridos
      </div>
      <div class="cell-content">
        <a *ngFor="let doc of getDocumentsArr(workOrder!.DOCUMENTOS!)" id="download" target="_blank" (click)="downloadDoc(doc)">
          <span>&#8226;</span> {{ doc.name }} - <span style="font-weight: 500;">{{ doc.size }}</span>
        </a>
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Contratos requeridos
      </div>
      <div class="cell-content">
        {{ workOrder!.ANALISIS == null ? 'Sin configuración' : workOrder!.CONTRATOS }}
      </div>
    </div>
    <div class="order-grid-cell w-100 border-bottom">
      <div class="cell-label">
        Información del activador
      </div>
      <div class="cell-content">
        Activador #{{ workOrder!.ACTIVADOR }} - <span>{{ getTypeStr(workOrder!.TIPOACTIVADOR!) }}</span>. {{ getActivatorConfigStr() }}
      </div>
    </div>
    <div class="order-grid-cell ogw-50 border-right border-bottom">
      <div class="cell-label">
        Usuario que registró
      </div>
      <div class="cell-content">
        {{ workOrder!.USUARIOREGISTRA }}
      </div>
    </div>
    <div class="order-grid-cell ogw-50 border-bottom">
      <div class="cell-label">
        Fecha de registro
      </div>
      <div class="cell-content">
        {{ orderDate(workOrder!.FECHAREGISTRO) }}
      </div>
    </div>
    <div class="order-grid-cell ogw-50 border-right">
      <div class="cell-label">
        Usuario de la última modificación
      </div>
      <div class="cell-content">
        {{ workOrder!.USUARIOMODIFICA == null ? '-' : workOrder!.USUARIOMODIFICA }}
      </div>
    </div>
    <div class="order-grid-cell ogw-50">
      <div class="cell-label">
        Fecha de la última modificación
      </div>
      <div class="cell-content">
        {{ workOrder!.FECHAMODIFICACION == null ? '-' : orderDate(workOrder!.FECHAMODIFICACION) }}
      </div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button>Imprimir PDF</button>
</div>