<h1 mat-dialog-title class="prevent-select">Detalles de contrato</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="animated fadeIn contract-details-column" *ngIf="!isLoading && !hasError">
    <p><b>ID del contrato: </b>{{ contract.CONTRACT_ID }}</p>
    <p><b>Nombre del contrato: </b>{{ contract.CONTRACT_NAME }}</p>
    <p><b>Denominación del empleado: </b>{{ contract.DENOMINATION }}</p>
    <p><b>Orden de trabajo relacionada: </b>Orden de trabajo {{ contract.WORK_ORDER_TYPE }} #{{ contract.WORK_ORDER_ID }}</p>
    <p><b>Tipo de contrato: </b>{{ contract.CONTRACT_TYPE }}</p>
    <p><b>Fecha de inicio: </b>{{ contract.START_DATE }}</p>
    <p><b>Fecha de término: </b>{{ contract.END_DATE }}</p>
    <p><b>Duración: </b>{{ contract.DURATION }}</p>
    <p><b>Costo del contrato: </b>{{ contract.CONTRACT_COST }}</p>
    <p><b>Documento relacionado: </b>{{ documents[0].name }}</p>
    <p><b>Estado: </b>{{ contract.STATUS }}</p>
    <p><b>Usuario que registró: </b>{{ contract.REGISTERED_BY }}</p>
    <p><b>Fecha de registro: </b>{{ contract.REGISTER_DATE }}</p>
    <p><b>Último usuario que modificó: </b>{{ contract.MODIFIED_BY == null ? '-' : contract.MODIFIED_BY }}</p>
    <p><b>Fecha de última modificación: </b>{{ contract.MODIFICATION_DATE == null ? '-' : contract.MODIFICATION_DATE }}</p>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>