<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="is-loading 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="details-row mb-8">
      <div class="details-title-cell">Equipamiento:</div>
      <div class="details-description-cell">{{ vistDetails!.EQUIPAMIENTO }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Personal:</div>
      <div class="details-description-cell">{{ getPersonal(vistDetails!.PERSONAL) }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Herramientas:</div>
      <div class="details-description-cell">{{ getTools(vistDetails!.MATERIAL) }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Refacciones:</div>
      <div class="details-description-cell">{{ getResources(vistDetails!.MATERIAL) }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Estado:</div>
      <div class="details-description-cell">{{ getStatus(vistDetails!.ESTADO) }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Comentarios iniciales:</div>
      <div class="details-description-cell">{{ getComments(vistDetails!.COMENTARIOS, 'CI') }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Usuario que registró:</div>
      <div class="details-description-cell">{{ vistDetails!.USRREG }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Fecha de registro:</div>
      <div class="details-description-cell">{{ orderDate(vistDetails!.FECREG) }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO != 'P'">
      <div class="details-title-cell">
        <span *ngIf="vistDetails!.ESTADO == 'A' || vistDetails!.ESTADO == 'C' || vistDetails!.ESTADO == 'F'">
          Usuario que autorizó:
        </span>
        <span *ngIf="vistDetails!.ESTADO == 'R'">Usuario que rechazó:</span>
      </div>
      <div class="details-description-cell">{{ vistDetails!.USAURE == null ? '-' : vistDetails!.USAURE }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO != 'P'">
      <div class="details-title-cell">
        <span *ngIf="vistDetails!.ESTADO == 'A' || vistDetails!.ESTADO == 'C' || vistDetails!.ESTADO == 'F'">
          Fecha de autorización:
        </span>
        <span *ngIf="vistDetails!.ESTADO == 'R'">Fecha de rechazó:</span>
      </div>
      <div class="details-description-cell">{{ vistDetails!.FEAURE == null ? '-' : vistDetails!.FEAURE }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO != 'P'">
      <div class="details-title-cell">
        <span *ngIf="vistDetails!.ESTADO == 'A' || vistDetails!.ESTADO == 'C' || vistDetails!.ESTADO == 'F'">
          Comentarios de autorización:
        </span>
        <span *ngIf="vistDetails!.ESTADO == 'R'">Comentarios de rechazo:</span>
      </div>
      <div class="details-description-cell">{{ getComments(vistDetails!.COMENTARIOS, vistDetails!.ESTADO == 'R' ? 'CR' : 'CA') }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO == 'C'">
      <div class="details-title-cell">Usuario que canceló:</div>
      <div class="details-description-cell">{{ vistDetails!.USRCAN == null ? '-' : vistDetails!.USRCAN }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO == 'C'">
      <div class="details-title-cell">Fecha de cancelación:</div>
      <div class="details-description-cell">{{ vistDetails!.FECCAN == null ? '-' : vistDetails!.FECCAN }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO == 'C'">
      <div class="details-title-cell">Comentarios de la cancelación:</div>
      <div class="details-description-cell">{{ getComments(vistDetails!.COMENTARIOS, 'CC') }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO == 'F'">
      <div class="details-title-cell">Usuario que finalizó:</div>
      <div class="details-description-cell">{{ vistDetails!.USUFIN == null ? '-' : vistDetails!.USUFIN }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO == 'F'">
      <div class="details-title-cell">Fecha de finalización:</div>
      <div class="details-description-cell">{{ vistDetails!.FECFIN == null ? '-' : vistDetails!.FECFIN }}</div>
    </div>
    <div class="details-row mb-8" *ngIf="vistDetails!.ESTADO == 'F'">
      <div class="details-title-cell">Comentarios de la finalización:</div>
      <div class="details-description-cell">{{ getComments(vistDetails!.COMENTARIOS, 'CF') }}</div>
    </div>
    <div class="details-row mb-8">
      <div class="details-title-cell">Usuario que modificó por última vez:</div>
      <div class="details-description-cell">{{ vistDetails!.USRMOD == null ? '-' : vistDetails!.USRMOD }}</div>
    </div>
    <div class="details-row">
      <div class="details-title-cell">Fecha de última modificación:</div>
      <div class="details-description-cell">{{ vistDetails!.FECMOD == null ? '-' : vistDetails!.FECMOD }}</div>
    </div>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>