<h1 mat-dialog-title class="prevent-select">Detalles del empleado {{ employeeName }}</h1>
<div mat-dialog-content class="prevent-select">

  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información" />

  @if (!isLoading && hasError) {
    <div class="has-error animated fadeIn pt-64">
      <mat-icon class="red_primary_font">error</mat-icon>
      <h2>{{ errorStr }}</h2>
    </div>
  }

  @if (!isLoading && !hasError) {
    <div class="animated fadeIn employee-details-column">
      <p>
        <b>ID del empleado: </b>
        {{ employee!.ID_EMPLOYEE }}
      </p>
      <p>
        <b>Nombre del empleado: </b>
        {{ employee!.EMPLOYEE_NAME }}
      </p>
      <p>
        <b>ID de usuario: </b>
        {{ employee!.USER_ID }}
      </p>
      <p>
        <b>Equipo de trabajo: </b>
        {{ employee!.WORKTEAM_NAME == null ? 'Sin equipo' : employee!.WORKTEAM_NAME }} 
        @if (employee!.WORKTEAM_ID != null) {
          <span>({{ employee!.WORKTEAM_ID }})</span>
        }
      </p>
      <p>
        <b>Tipo de contrato: </b>
        {{ employee!.CONTRACT_TYPE }}
      </p>
      @if (employee!.CONTRACT_TYPE == 'Subcontratista') {
        <p>
          <b>Subcontratista relacionado: </b>
          {{ employee!.SUBCONTRATIST_NAME }} ({{ employee!.SUBCONTRATIST_ID }})
        </p>
      }
      @if (employee!.CONTRACT_TYPE == 'Subcontratista') {
        <p>
          <b>Régimen fiscal del subcontratista relacionado: </b>
          {{ employee!.TAX_REGIME_DESCRIPTION }} ({{ employee!.TAX_REGIME }})
        </p>
      }
      <p>
        <b>Especialidad: </b>
        {{ employee!.SPECIALITY }}
      </p>
      <p>
        <b>Extranjero: </b>
        {{ employee!.FOREIGNER }}
      </p>
      @if (employee!.FOREIGNER == 'Si') {
        <p>
          <b>TAX ID: </b>
          {{ employee!.TAX_ID }}
        </p>
      }
      @if (employee!.FOREIGNER == 'No') {
        <p>
          <b>RFC: </b>
          {{ employee!.RFC }}
        </p>
      }
      <p>
        <b>País: </b>
        {{ employee!.COUNTRY }}
      </p>
      <p>
        <b>Estado: </b>
        {{ employee!.STATE }}
      </p>
      <p>
        <b>Ciudad: </b>
        {{ employee!.CITY == null ? '-' : employee!.CITY }}
      </p>
      <p>
        <b>Localidad: </b>
        {{ employee!.TOWN == null ? '-' : employee!.TOWN }}
      </p>
      <p>
        <b>Colonia: </b>
        {{ employee!.SETTING }}
      </p>
      <p>
        <b>Código postal: </b>
        {{ employee!.ZIP_CODE }}
      </p>
      <p>
        <b>Calle: </b>
        {{ employee!.STREET }}
      </p>
      <p>
        <b>Número exterior: </b>
        {{ employee!.EXTERIOR_NUMBER }}
      </p>
      <p>
        <b>Número interior: </b>
        {{ employee!.INTERIOR_NUMBER == null ? 'Sin número' : employee!.INTERIOR_NUMBER }}
      </p>
      <p>
        <b>Nombre del contacto de emergencia: </b>
        {{ employee!.CONTACT_NAME }}
      </p>
      <p>
        <b>Teléfono del contacto de emergencia: </b>
        {{ employee!.CONTACT_LADA }}-{{ employee!.CONTACT_TELEPHONE }}
      </p>
      <p>
        <b>Dirección del contacto de emergencia: </b>
        {{ employee!.CONTACT_ADDRESS }}
      </p>
      <p>
        <b>Estado: </b>
        {{ employee!.STATUS }}
      </p>
      <p>
        <b>Usuario que registró: </b>
        {{ employee!.USRREG }}
      </p>
      <p>
        <b>Fecha de registro: </b>
        {{ employee!.FECREG }}
      </p>
      <p>
        <b>Usuario que modificó: </b>
        {{ employee!.USRMOD == null ? '-' : employee!.USRMOD }}
      </p>
      <p>
        <b>Fecha de última modificación: </b>
        {{ employee!.FECMOD == null ? '-' : employee!.FECMOD }}
      </p>
    </div>
  }
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>