<h1 mat-dialog-title class="prevent-select">Detalles visita #{{ idVisit }}</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 fast" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font mb-40" style="transform: scale(5);">error</mat-icon>
    <h3 style="font-weight: bold; font-style: italic;">{{ errorStr }}</h3>
  </div>
  <div class="animated fadeIn details-column" *ngIf="!isLoading && !hasError">
    <div class="mb-8">
      <span style="font-weight: 500;">Equipamiento:</span> {{ vistDetails!.TIPO_EQUIPAMIENTO }} - {{ vistDetails!.MODELO_EQUIPAMIENTO }}
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Personal:</span>
      <ul class="m-0">
        <li *ngFor="let item of vistDetails!.PERSONAL_ARR">
          <span style="font-weight: 500;">{{ item.TYPE }}</span> - {{ item.NAME }} ({{ item.ID }})
        </li>
      </ul>
    </div>
    <div class=" mb-8">
      <span style="font-weight: 500;">Herramientas:</span> Pendiente
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Refacciones:</span> Pendiente
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Estado:</span> {{ statusMap.get(vistDetails!.ESTADO) }}
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Comentarios iniciales:</span> {{ getComments(vistDetails!.COMENTARIOS, 'CI') }}
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Usuario que registró:</span> {{ vistDetails!.USRREG }}
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Fecha de registro:</span> {{ orderDate(vistDetails!.FECREG) }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO != 'P'">
      <span *ngIf="vistDetails!.ESTADO == 'A' || vistDetails!.ESTADO == 'C' || vistDetails!.ESTADO == 'F'" style="font-weight: 500;">
        Usuario que autorizó: 
      </span>
      <span *ngIf="vistDetails!.ESTADO == 'R'" style="font-weight: 500;">Usuario que rechazó: </span>
      {{ vistDetails!.USAURE == null ? '-' : vistDetails!.USAURE }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO != 'P'">
      <span *ngIf="vistDetails!.ESTADO == 'A' || vistDetails!.ESTADO == 'C' || vistDetails!.ESTADO == 'F'" style="font-weight: 500;">
        Fecha de autorización: 
      </span>
      <span *ngIf="vistDetails!.ESTADO == 'R'" style="font-weight: 500;">Fecha de rechazo: </span>
      {{ vistDetails!.FEAURE == null ? '-' : orderDate(vistDetails!.FEAURE) }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO != 'P'">
      <span *ngIf="vistDetails!.ESTADO == 'A' || vistDetails!.ESTADO == 'C' || vistDetails!.ESTADO == 'F'" style="font-weight: 500;">
        Comentarios de autorización:
      </span>
      <span *ngIf="vistDetails!.ESTADO == 'R'" style="font-weight: 500;">Comentarios de rechazo:</span>
      {{ getComments(vistDetails!.COMENTARIOS, vistDetails!.ESTADO == 'R' ? 'CR' : 'CA') }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO == 'C'">
      <span style="font-weight: 500;">Usuario que canceló:</span> {{ vistDetails!.USRCAN == null ? '-' : vistDetails!.USRCAN }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO == 'C'">
      <span style="font-weight: 500;">Fecha de cancelación:</span> {{ vistDetails!.FECCAN == null ? '-' : orderDate(vistDetails!.FECCAN) }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO == 'C'">
      <span style="font-weight: 500;">Comentarios de la cancelación:</span> {{ getComments(vistDetails!.COMENTARIOS, 'CC') }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO == 'F'">
      <span style="font-weight: 500;">Usuario que finalizó:</span> {{ vistDetails!.USUFIN == null ? '-' : vistDetails!.USUFIN }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO == 'F'">
      <span style="font-weight: 500;">Fecha de finalización:</span> {{ vistDetails!.FECFIN == null ? '-' : orderDate(vistDetails!.FECFIN) }}
    </div>
    <div class="mb-8" *ngIf="vistDetails!.ESTADO == 'F'">
      <span style="font-weight: 500;">Comentarios de la finalización:</span> {{ getComments(vistDetails!.COMENTARIOS, 'CF') }}
    </div>
    <div class="mb-8">
      <span style="font-weight: 500;">Usuario que modificó por última vez:</span> {{ vistDetails!.USRMOD == null ? '-' : vistDetails!.USRMOD }}
    </div>
    <div>
      <span style="font-weight: 500;">Fecha de última modificación:</span> {{ vistDetails!.FECMOD == null ? '-' : orderDate(vistDetails!.FECMOD) }}
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>