<h1 mat-dialog-title class="prevent-select">Detalles orden de mantenimiento correctivo</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 correctivo #{{ workOrder!.ID_ORDEN }}</b></p>
    <p><b>Usuario encargado de atender la solicitud: </b>{{ workOrder!.ID_RESPONSABLE }} - {{ workOrder!.TIPO_RESPONSABLE }}</p>
    <p><b>Descripción: </b>{{ workOrder!.DESCRIPCION }}</p>
    <p><b>Equipamiento: </b>{{ workOrder!.TIPO_EQUIPAMIENTO }} - {{ workOrder!.MODELO_EQUIPAMIENTO }}</p>
    <p><b>Fecha de inicio: </b>{{ workOrder!.FECHA_INICIO }}</p>
    <p><b>Tiempo de solución estimado: </b>{{ workOrder!.TIEMPO_ESTIMADO }}h</p>
    <p><b>Contador relacionado: </b>#{{ workOrder!.CONTADOR }}</p>
    <p class="m-0"><b>Medida reportada al registro de la orden:</b></p>
    <ul class="m-0">
      @if (workOrder!.MEDIDAS_OBJ != undefined) {
        <li><b>ID medida: </b>{{ workOrder!.MEDIDAS_OBJ!.ID_MEDIDA }}</li>
        <li><b>Valor: </b>{{ workOrder!.MEDIDAS_OBJ!.VALOR }}</li>
        <li><b>Servicio web: </b>{{ workOrder!.MEDIDAS_OBJ!.URL_SERVICIO_WEB }}</li>
        <li><b>Fecha y hora de registro: </b>{{ workOrder!.MEDIDAS_OBJ!.HORA_REGISTRO }}</li>
      } @else {
        <li><b>Sin medidas</b></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>Fecha de finalización: </b>{{ workOrder!.FECHA_FINAL == null ? '-' : workOrder!.FECHA_FINAL }}</p>
    <p><b>Duración total: </b>{{ workOrder!.DURACION_TOTAL == null ? '-' : workOrder!.DURACION_TOTAL + 'h' }}</p>
    <p class="m-0"><b>Recursos requeridos:</b></p>
    <ul class="m-0">
      @if (workOrder!.RECURSOS_ARR!.length > 0) {
        <li *ngFor="let item of workOrder!.RECURSOS_ARR">
          {{ item.label }}, {{ item.type }} - {{ item.required }} {{ item.unit }}(s)
        </li>
      } @else {
        <li><b>Sin recursos</b></li>
      }
    </ul>
    <div style="width: 100%;" class="mt-12"></div>
    <p class="m-0"><b>Personal requerido:</b></p>
    <ul class="m-0">
      @if (workOrder!.PERSONAL_ARR!.length > 0) {
        <li *ngFor="let item of workOrder!.PERSONAL_ARR">
          {{ item.NAME }} - {{ item.CANT }} operario(s) requerido(s).
        </li>
      } @else {
        <li><b>Sin personal</b></li>
      }
    </ul>
    <p class="mt-12"><b>Tipo de activación: </b>{{ workOrder!.TIPO_ACTIVACION }}</p>
    <p class="m-0"><b>Documentos requeridos:</b></p>
    <ul class="m-0">
      @if (workOrder!.DOCUMENTOS_RELACIONADOS_ARR!.length > 0) {
        <li *ngFor="let item of workOrder!.DOCUMENTOS_RELACIONADOS_ARR">
          {{ item.name }} - {{ item.size }}
        </li>
      } @else {
        <li><b>Sin documentos</b></li>
      }
    </ul>
    <p class="mt-12"><b>Clasificación: </b>{{ workOrder!.CLASIFICACION }}</p>
    <p><b>Comentarios: </b>{{ workOrder!.COMENTARIOS == null ? '-' : workOrder!.COMENTARIOS }}</p>
    <p><b>Estado: </b>{{ workOrder!.ESTADO }}</p>
    <p><b>Usuario que realizó el registro: </b>{{ workOrder!.USUREG }}</p>
    <p><b>Fecha de registro: </b>{{ workOrder!.FECREG }}</p>
    <p><b>Usuario que modificó: </b>{{ workOrder!.USUMOD == null ? '-' : workOrder!.USUMOD }}</p>
    <p><b>Fecha de modificación: </b>{{ workOrder!.FECMOD == null ? '-' : workOrder!.FECMOD }}</p>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>