frontend-inversiones/src/app/components/instruments/titulos/titulos.component.html

<div *ngIf="!summary">
  <h4 class="card-title">
    Titularización
  </h4>

  <form
    class="form-auth-small ng-untouched ng-pristine ng-valid"
    [formGroup]="investmentProposalForm"
  >
    <div class="row">
      <!-- Valor nominal compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="valor_nominal_compra">Valor nominal compra: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="valor_nominal_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.valor_nominal_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.valor_nominal_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.valor_nominal_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.valor_nominal_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comisión casa compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="comision_casa_porcentaje_compra"
            >Comisión casa compra:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="comision_casa_porcentaje_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.comision_casa_porcentaje_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.comision_casa_porcentaje_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.comision_casa_porcentaje_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.comision_casa_porcentaje_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comisión bolsa compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="comision_bolsa_porcentaje_compra"
            >Comisión bolsa compra:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="comision_bolsa_porcentaje_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.comision_bolsa_porcentaje_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.comision_bolsa_porcentaje_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.comision_bolsa_porcentaje_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Cupón compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="cupon_porcentaje_compra">Cupón compra: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="cupon_porcentaje_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.cupon_porcentaje_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.cupon_porcentaje_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.cupon_porcentaje_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.cupon_porcentaje_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha de vencimiento de venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_emision">Fecha de emision: </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_emision"
                (click)="dp.toggleCalendar()"
                [options]="myDpOptions"
                #dp="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_emision.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_emision.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_emision.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <!-- Costo de transferencia -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="costo_transferencia">Costo de transferencia: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="costo_transferencia"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.costo_transferencia.errors
              }"
            />
            <div
              *ngIf="submitted && f.costo_transferencia.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.costo_transferencia.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.costo_transferencia.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- [YTM] Rendimiento de vencimiento de compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="ytm_vencimiento_porcentaje_compra"
            >[YTM] Rendimiento de vencimiento de compra:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="ytm_vencimiento_porcentaje_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.ytm_vencimiento_porcentaje_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.ytm_vencimiento_porcentaje_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.ytm_vencimiento_porcentaje_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Precio de compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="precio_compra">Precio de compra: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="precio_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.precio_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.precio_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.precio_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.precio_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Precio de vencimiento de compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="precio_vencimiento_compra"
            >Precio de vencimiento de compra:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="precio_vencimiento_compra"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.precio_vencimiento_compra.errors
              }"
            />
            <div
              *ngIf="submitted && f.precio_vencimiento_compra.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.precio_vencimiento_compra.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.precio_vencimiento_compra.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Ultima fecha cupón compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_ultima_cupon_compra"
            >Ultima fecha cupón compra:
          </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_ultima_cupon_compra"
                (click)="dp1.toggleCalendar()"
                [options]="myDpOptions"
                #dp1="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_ultima_cupon_compra.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_ultima_cupon_compra.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_ultima_cupon_compra.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha de vencimiento de compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_vencimiento_compra"
            >Fecha de vencimiento de compra:
          </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_vencimiento_compra"
                (click)="dp2.toggleCalendar()"
                [options]="myDpOptions"
                #dp2="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_vencimiento_compra.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_vencimiento_compra.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_vencimiento_compra.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha de liquidacion de compra -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_liquidacion_compra"
            >Fecha de liquidación de compra:
          </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_liquidacion_compra"
                (click)="dp3.toggleCalendar()"
                [options]="myDpOptions"
                #dp3="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_liquidacion_compra.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_liquidacion_compra.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_liquidacion_compra.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <!-- Valor nominal venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="valor_nominal_venta">Valor nominal venta: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="valor_nominal_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.valor_nominal_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.valor_nominal_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.valor_nominal_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.valor_nominal_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comisión casa venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="comision_casa_porcentaje_venta"
            >Comisión casa venta:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="comision_casa_porcentaje_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.comision_casa_porcentaje_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.comision_casa_porcentaje_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.comision_casa_porcentaje_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.comision_casa_porcentaje_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Comisión bolsa venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="comision_bolsa_porcentaje_venta"
            >Comisión bolsa venta:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="comision_bolsa_porcentaje_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.comision_bolsa_porcentaje_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.comision_bolsa_porcentaje_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.comision_bolsa_porcentaje_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Cupón venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="cupon_porcentaje_venta">Cupón venta: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="cupon_porcentaje_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.cupon_porcentaje_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.cupon_porcentaje_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.cupon_porcentaje_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.cupon_porcentaje_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- [YTM] Rendimiento de vencimiento de venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="ytm_vencimiento_porcentaje_venta"
            >[YTM] Rendimiento de vencimiento de venta:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-percent" aria-hidden="true"></i>
            </p>
            <input
              type="text"
              formControlName="ytm_vencimiento_porcentaje_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid':
                  submitted && f.ytm_vencimiento_porcentaje_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.ytm_vencimiento_porcentaje_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.ytm_vencimiento_porcentaje_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Precio de venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="precio_venta">Precio de venta: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="precio_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.precio_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.precio_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.precio_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.precio_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Precio de vencimiento de venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="precio_vencimiento_venta"
            >Precio de vencimiento de venta:
          </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-dollar-sign"></i>
            </p>
            <input
              type="text"
              formControlName="precio_vencimiento_venta"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.precio_vencimiento_venta.errors
              }"
            />
            <div
              *ngIf="submitted && f.precio_vencimiento_venta.errors"
              class="invalid-feedback"
            >
              <div *ngIf="f.precio_vencimiento_venta.errors.required">
                Campo requerido
              </div>
              <div *ngIf="f.precio_vencimiento_venta.errors.pattern">
                Debe ingresar una cifra válida
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Ultima fecha cupón venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_ultima_cupon_venta"
            >Ultima fecha cupón venta:
          </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_ultima_cupon_venta"
                (click)="dp4.toggleCalendar()"
                [options]="myDpOptions"
                #dp4="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_ultima_cupon_venta.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_ultima_cupon_venta.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_ultima_cupon_venta.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha de vencimiento de venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_vencimiento_venta"
            >Fecha de vencimiento de venta:
          </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_vencimiento_venta"
                (click)="dp5.toggleCalendar()"
                [options]="myDpOptions"
                #dp5="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_vencimiento_venta.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_vencimiento_venta.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_vencimiento_venta.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <!-- Fecha de liquidacion de venta -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_liquidacion_venta"
            >Fecha de liquidación de venta:
          </label>

          <div class="input-box-container">
            <div>
              <p>
                <i class="far fa-calendar" aria-hidden="true"></i>
              </p>
              <input
                class="input-box form-control"
                placeholder="Seleccione una fecha"
                angular-mydatepicker
                formControlName="fecha_liquidacion_venta"
                (click)="dp6.toggleCalendar()"
                [options]="myDpOptions"
                #dp6="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_liquidacion_venta.errors
                }"
              />
            </div>
          </div>

          <div
            *ngIf="submitted && f.fecha_liquidacion_venta.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.fecha_liquidacion_venta.errors.required">
              Campo requerido
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_liquidacion_venta">Archivo de porcentajes: </label>
          <input
            type="file"
            #csvReader
            name="porcentajes"
            id="txtFileUpload"
            (change)="uploadListener($event)"
            accept=".xlsx"
          />
        </div>
      </div>

      <div class="col-lg-12 col-sm-12 pr-xl-12">
        <div class="form-group text-right">
          <br />
          <button
            type="button"
            class="btn btn-success center-component"
            (click)="getCalculations(investmentProposalForm, false)"
          >
            Realizar cálculos
          </button>
        </div>
      </div>
    </div>

    <br />
    <!-- Calculos del instrumento-->
    <div class="instrument-calcs">
      <div class="row">
        <div class="col-12">
          <span class="badge badge-success badge-custom"
            >Cálculos del instrumento</span
          >
        </div>

        <div class="col-12">
          <h3>
            Instrumento de compra
          </h3>
        </div>
        <div class="col-sm-4">
          <h4>Fecha siguiente cupón compra:</h4>
          <div class="field">
            {{ fecha_siguiente_cupon_compra }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Comision casa compra:</h4>
          <div class="field">
            $USD {{ comision_casa_compra | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Comision bolsa compra:</h4>
          <div class="field">
            $USD {{ comision_bolsa_compra | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>YTM vencimiento comisión compra (%):</h4>
          <div class="field">
            {{ ytm_vencimiento_comision_porcentaje_compra | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Días vencimiento de compra:</h4>
          <div class="field">
            {{ dias_vencimiento_compra }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Días acumulados de compra:</h4>
          <div class="field">
            {{ dias_acumulados_compra }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Interés acumulado compra:</h4>
          <div class="field">
            $USD
            {{ interes_acumulado_compra | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Interés acumulado compra (%):</h4>
          <div class="field">
            {{ interes_acumulado_porcentaje_compra | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Precio sucio compra (%):</h4>
          <div class="field">
            {{ precio_sucio_porcentaje_compra | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Valor transado compra:</h4>
          <div class="field">
            $USD {{ valor_transado_compra | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Monto a pagar:</h4>
          <div class="field">$USD {{ monto_pagar | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-4">
          <h4>Fecha inicio de vigencia:</h4>
          <div class="field">
            {{ fecha_inicio_vigencia }}
          </div>
        </div>

        <div class="col-12">
          <h3>
            Instrumento de venta
          </h3>
        </div>
        <div class="col-sm-4">
          <h4>Fecha siguiente cupón venta:</h4>
          <div class="field">
            {{ fecha_siguiente_cupon_venta }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Comision casa venta:</h4>
          <div class="field">
            $USD {{ comision_casa_venta | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>YTM vencimiento comisión venta (%):</h4>
          <div class="field">
            {{ ytm_vencimiento_comision_porcentaje_venta | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Días vencimiento de venta:</h4>
          <div class="field">
            {{ dias_vencimiento_venta }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Días acumulados de venta:</h4>
          <div class="field">
            {{ dias_acumulados_venta }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Interés acumulado venta:</h4>
          <div class="field">
            $USD {{ interes_acumulado_venta | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Interés acumulado venta (%):</h4>
          <div class="field">
            {{ interes_acumulado_porcentaje_venta | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Precio sucio venta (%):</h4>
          <div class="field">
            {{ precio_sucio_porcentaje_venta | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Valor transado venta:</h4>
          <div class="field">
            $USD {{ valor_transado_venta | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-12">
          <h3>
            Resultado de la operación
          </h3>
        </div>
        <div class="col-sm-4">
          <h4>Monto a recibir:</h4>
          <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-4">
          <h4>Días tenencia total:</h4>
          <div class="field">
            {{ dias_tenencia_total }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Ingresos intereses:</h4>
          <div class="field">
            $USD {{ ingresos_intereses | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Costos totales:</h4>
          <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
        </div>
        <div class="col-sm-4">
          <h4>Ganancia o pérdida total:</h4>
          <div class="field">
            $USD {{ ganancia_perdida_total | number: "1.2-4" }}
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Ganancia o pérdida de capital:</h4>
          <div class="field">
            {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Interés (%):</h4>
          <div class="field">
            {{ intereses_porcentaje | number: "1.2-4" }} %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Interés neto antes de impuesto (%):</h4>
          <div class="field">
            {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Interés neto después de impuesto (%):</h4>
          <div class="field">
            {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
            %
          </div>
        </div>
        <div class="col-sm-4">
          <h4>Total de ingresos recibidos:</h4>
          <div class="field">
            $USD
            {{ total_ingresos_recibidos | number: "1.2-4" }}
          </div>
        </div>
      </div>
    </div>
    <br />
    <!-- Tabla de proyecciones del instrumento-->
    <div class="instrument-calcs">
      <div class="row">
        <div class="col-12">
          <span class="badge badge-success badge-custom"
            >Proyecciones del instrumento</span
          >
        </div>

        <div class="cete-table-container">
          <table mat-table [dataSource]="dataSource" class="example-table">
            <!-- Name Column -->
            <ng-container matColumnDef="posicion">
              <th mat-header-cell *matHeaderCellDef>#</th>
              <td mat-cell *matCellDef="let row">
                {{ row.posicion }}
              </td>
            </ng-container>
            <!-- Country Column -->
            <ng-container matColumnDef="plazo">
              <th mat-header-cell *matHeaderCellDef>Plazo</th>
              <td mat-cell *matCellDef="let row">
                {{ row.plazo }}
              </td>
            </ng-container>

            <ng-container matColumnDef="fecha_pago">
              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.fecha_pago == "" || row.fecha_pago == undefined
                    ? "-"
                    : row.fecha_pago
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="ingreso_bruto">
              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                    ? "-"
                    : row.ingreso_bruto
                }}
              </td>
            </ng-container>
            <ng-container matColumnDef="ingreso_neto">
              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_neto == "" || row.ingreso_neto == undefined
                    ? "-"
                    : row.ingreso_neto
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="impuesto">
              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.impuesto == "" || row.impuesto == undefined
                    ? "-"
                    : row.impuesto
                }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
          </table>

          <mat-paginator
            [pageSizeOptions]="[10, 15, 25]"
            [pageIndex]="0"
            [pageSize]="10"
          ></mat-paginator>
        </div>
      </div>
    </div>

    <br />
    <div class="form-group text-center space-20">
      <button
        type="button"
        class="btn btn-default center-component margin-right"
        (click)="goToPrevious()"
      >
        Anterior
      </button>
      <button
        type="submit"
        class="btn btn-primary center-component margin-right"
        (click)="goToNext(investmentProposalForm)"
      >
        Siguiente
      </button>
    </div>
  </form>
</div>

<div *ngIf="summary">
  <div class="timeline-body">
    <div class="row">
      <div class="col-12">
        <h3>
          Instrumento de compra
        </h3>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Costo transferencia:</h4>
        <div class="field">
          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor nominal de compra:</h4>
        <div class="field">
          $USD {{ instrument_work.valor_nominal_compra | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Precio compra:</h4>
        <div class="field">
          $USD {{ instrument_work.precio_compra | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Precio vencimiento compra:</h4>
        <div class="field">
          $USD {{ instrument_work.precio_vencimiento_compra | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Cupon porcentaje compra:</h4>
        <div class="field">
          {{ instrument_work.cupon_porcentaje_compra | number: "1.2-4" }}%
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha siguiente cupón compra:</h4>
        <div class="field">
          {{ instrument_work.fecha_siguiente_cupon_compra }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comisión casa compra (%):</h4>
        <div class="field">
          {{
            instrument_work.comision_casa_porcentaje_compra | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comision casa compra:</h4>
        <div class="field">
          $USD {{ instrument_work.comision_casa_compra | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comisión bolsa compra (%):</h4>
        <div class="field">
          {{
            instrument_work.comision_bolsa_porcentaje_compra | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comision bolsa compra:</h4>
        <div class="field">
          $USD {{ instrument_work.comision_bolsa_compra | number: "1.2-4" }}
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>YTM vencimiento compra (%):</h4>
        <div class="field">
          {{
            instrument_work.ytm_vencimiento_porcentaje_compra | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>YTM vencimiento comisión compra (%):</h4>
        <div class="field">
          {{
            instrument_work.ytm_vencimiento_comision_porcentaje_compra
              | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días vencimiento de compra:</h4>
        <div class="field">
          {{ instrument_work.dias_vencimiento_compra }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días acumulados de compra:</h4>
        <div class="field">
          {{ instrument_work.dias_acumulados_compra }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés acumulado compra:</h4>
        <div class="field">
          $USD {{ instrument_work.interes_acumulado_compra | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés acumulado compra (%):</h4>
        <div class="field">
          {{
            instrument_work.interes_acumulado_porcentaje_compra
              | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Precio sucio compra (%):</h4>
        <div class="field">
          {{ instrument_work.precio_sucio_porcentaje_compra | number: "1.2-4" }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor transado compra:</h4>
        <div class="field">
          $USD {{ instrument_work.valor_transado_compra | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Monto a pagar:</h4>
        <div class="field">
          $USD {{ instrument_work.monto_pagar | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Ultima fecha de cupón compra:</h4>
        <div class="field">
          {{ instrument_work.fecha_ultima_cupon_compra }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha de liquidación compra:</h4>
        <div class="field">
          {{ instrument_work.fecha_liquidacion_compra }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha vencimiento compra:</h4>
        <div class="field">
          {{ instrument_work.fecha_vencimiento_compra }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha inicio de vigencia:</h4>
        <div class="field">
          {{ instrument_work.fecha_inicio_vigencia }}
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-12">
        <h3>
          Instrumento de venta
        </h3>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Costo transferencia:</h4>
        <div class="field">
          $USD {{ instrument_work.costo_transferencia | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor nominal de venta:</h4>
        <div class="field">
          $USD {{ instrument_work.valor_nominal_venta | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Precio venta:</h4>
        <div class="field">
          $USD {{ instrument_work.precio_venta | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Precio vencimiento venta:</h4>
        <div class="field">
          $USD {{ instrument_work.precio_vencimiento_venta | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Cupon porcentaje venta:</h4>
        <div class="field">
          {{ instrument_work.cupon_porcentaje_venta | number: "1.2-4" }}%
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha siguiente cupón venta:</h4>
        <div class="field">
          {{ instrument_work.fecha_siguiente_cupon_venta }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comisión casa venta (%):</h4>
        <div class="field">
          {{ instrument_work.comision_casa_porcentaje_venta | number: "1.2-4" }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comision casa venta:</h4>
        <div class="field">
          $USD {{ instrument_work.comision_casa_venta | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Comisión bolsa venta (%):</h4>
        <div class="field">
          {{
            instrument_work.comision_bolsa_porcentaje_venta | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>YTM vencimiento venta (%):</h4>
        <div class="field">
          {{
            instrument_work.ytm_vencimiento_porcentaje_venta | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>YTM vencimiento comisión venta (%):</h4>
        <div class="field">
          {{
            instrument_work.ytm_vencimiento_comision_porcentaje_venta
              | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días vencimiento de venta:</h4>
        <div class="field">
          {{ instrument_work.dias_vencimiento_venta }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días acumulados de venta:</h4>
        <div class="field">
          {{ instrument_work.dias_acumulados_venta }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés acumulado venta:</h4>
        <div class="field">
          $USD {{ instrument_work.interes_acumulado_venta | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés acumulado venta (%):</h4>
        <div class="field">
          {{
            instrument_work.interes_acumulado_porcentaje_venta | number: "1.2-4"
          }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Precio sucio venta (%):</h4>
        <div class="field">
          {{ instrument_work.precio_sucio_porcentaje_venta | number: "1.2-4" }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Valor transado venta:</h4>
        <div class="field">
          $USD {{ instrument_work.valor_transado_venta | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Ultima fecha de cupón venta:</h4>
        <div class="field">
          {{ instrument_work.fecha_ultima_cupon_venta }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha de liquidación venta:</h4>
        <div class="field">
          {{ instrument_work.fecha_liquidacion_venta }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Fecha vencimiento venta:</h4>
        <div class="field">
          {{ instrument_work.fecha_vencimiento_venta }}
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h3>
          Resultado de la operación
        </h3>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Monto a recibir:</h4>
        <div class="field">$USD {{ monto_recibir | number: "1.2-4" }}</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Días tenencia total:</h4>
        <div class="field">
          {{ dias_tenencia_total }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Ingresos intereses:</h4>
        <div class="field">$USD {{ ingresos_intereses | number: "1.2-4" }}</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Costos totales:</h4>
        <div class="field">$USD {{ costos_totales | number: "1.2-4" }}</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Ganancia o pérdida total:</h4>
        <div class="field">
          $USD {{ ganancia_perdida_total | number: "1.2-4" }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Ganancia o pérdida de capital:</h4>
        <div class="field">
          {{ ganancia_perdida_capital_porcentaje | number: "1.2-4" }}%
        </div>
      </div>

      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés (%):</h4>
        <div class="field">{{ intereses_porcentaje | number: "1.2-4" }} %</div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés neto antes de impuesto (%):</h4>
        <div class="field">
          {{ neto_antes_impuesto_porcentaje | number: "1.2-4" }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Interés neto después de impuesto (%):</h4>
        <div class="field">
          {{ neto_despues_impuesto_porcentaje | number: "1.2-4" }}
          %
        </div>
      </div>
      <div class="col-lg-3 col-md-4 col-sm-6">
        <h4>Total de ingresos recibidos:</h4>
        <div class="field">
          $USD {{ total_ingresos_recibidos | number: "1.2-4" }}
        </div>
      </div>
    </div>

    <br />
    <div *ngIf="hasProjections" class="instrument-calcs-summary">
      <div class="row">
        <div class="col-12">
          <span class="badge-warning badge-custom-instrument"
            >Proyecciones del instrumento</span
          >
        </div>

        <div class="cete-table-container">
          <table mat-table [dataSource]="dataSource2" class="example-table">
            <!-- Name Column -->
            <ng-container matColumnDef="posicion">
              <th mat-header-cell *matHeaderCellDef>#</th>
              <td mat-cell *matCellDef="let row">
                {{ row.posicion }}
              </td>
            </ng-container>
            <!-- Country Column -->
            <ng-container matColumnDef="plazo">
              <th mat-header-cell *matHeaderCellDef>Plazo</th>
              <td mat-cell *matCellDef="let row">
                {{ row.plazo }}
              </td>
            </ng-container>

            <!-- Country Column -->
            <ng-container matColumnDef="fecha_pago">
              <th mat-header-cell *matHeaderCellDef>Fecha pago</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.fecha_pago == "" || row.fecha_pago == undefined
                    ? "-"
                    : row.fecha_pago
                }}
              </td>
            </ng-container>

            <!-- Country Column -->
            <ng-container matColumnDef="ingreso_bruto">
              <th mat-header-cell *matHeaderCellDef>Ingreso bruto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_bruto == "" || row.ingreso_bruto == undefined
                    ? "-"
                    : row.ingreso_bruto
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="ingreso_neto">
              <th mat-header-cell *matHeaderCellDef>Ingreso neto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.ingreso_neto == "" || row.ingreso_neto == undefined
                    ? "-"
                    : row.ingreso_neto
                }}
              </td>
            </ng-container>

            <ng-container matColumnDef="impuesto">
              <th mat-header-cell *matHeaderCellDef>Impuesto</th>
              <td mat-cell *matCellDef="let row">
                {{
                  row.impuesto == "" || row.impuesto == undefined
                    ? "-"
                    : row.impuesto
                }}
              </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
          </table>

          <mat-paginator
            [pageSizeOptions]="[10, 15, 25]"
            [pageIndex]="0"
            [pageSize]="10"
          ></mat-paginator>
        </div>
      </div>
    </div>
  </div>
</div>