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

<div *ngIf="!summary">
  <h4 class="card-title">
    Opciones
  </h4>
  <form
    class="form-auth-small ng-untouched ng-pristine ng-valid"
    [formGroup]="investmentProposalForm"
  >
    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <label>Tipo de operación: </label>
        </div>
        <select
          class="custom-select"
          formControlName="operacion"
          (change)="toggle_operacion($event.target.value)"
        >
          <option
            *ngFor="let item of operaciones"
            [value]="item.codigo"
            [selected]="
              instrument_exists == false && item.codigo == instrument_work.corto
            "
            >{{ item.nombre }}</option
          >
        </select>
      </div>
      <div class="col-6">
        <div class="form-group">
          <label>Tipo de ejecución: </label>
        </div>
        <select
          class="custom-select"
          formControlName="ejecucion"
          (change)="toggle_ejecucion($event.target.value)"
        >
          <option
            *ngFor="let item of ejecuciones"
            [value]="item.codigo"
            [selected]="
              instrument_exists == false &&
              item.codigo == instrument_work.completo
            "
          >
            {{ item.nombre }}</option
          >
        </select>
      </div>
    </div>

    <div class="row">
      <!-- Fecha de vencimiento -->

      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="ticker">Ticker: </label>
          <div class="input-box-container">
            <p>
              <i class="fas fa-file-alt"></i>
            </p>
            <input
              type="text"
              formControlName="ticker"
              class="form-control"
              [ngClass]="{
                'is-invalid': submitted && f.ticker.errors
              }"
            />
            <div *ngIf="submitted && f.ticker.errors" class="invalid-feedback">
              <div *ngIf="f.ticker.errors.required">
                Campo requerido
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <br />
    <div
      class="row"
      *ngIf="tipoOperacion == 0 || (tipoOperacion == 1 && tipoEjecucion == 1)"
    >
      <div class="col-sm-12">
        <h4>Información de compra</h4>
      </div>

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

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

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

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

      <!-- Fecha de operación -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_operacion_compra">Fecha de operación </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_operacion_compra"
                (click)="dp0.toggleCalendar()"
                [options]="myDpOptions"
                #dp0="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_operacion_compra.errors
                }"
              />
            </div>
          </div>

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

      <!-- Fecha de liquidación -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_liquidacion_compra">Fecha de liquidación </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)="dp1.toggleCalendar()"
                [options]="myDpOptions"
                #dp1="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" *ngIf="tipoOperacion == 0">
      <!-- Fecha de vencimiento -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_vencimiento_compra">Fecha de vencimiento </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>
    </div>
    <br />
    <div
      class="row"
      *ngIf="tipoOperacion == 1 || (tipoOperacion == 0 && tipoEjecucion == 1)"
    >
      <div class="col-sm-12">
        <h4>Información de venta</h4>
      </div>

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

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

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

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

      <!-- Fecha de operación -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_operacion_venta">Fecha de operación </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_operacion_venta"
                (click)="dp3.toggleCalendar()"
                [options]="myDpOptions"
                #dp3="angular-mydatepicker"
                [ngClass]="{
                  'is-invalid': submitted && f.fecha_operacion_venta.errors
                }"
              />
            </div>
          </div>

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

      <!-- Fecha de liquidación -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_liquidacion_venta">Fecha de liquidación </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)="dp4.toggleCalendar()"
                [options]="myDpOptions"
                #dp4="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>

    <div class="row" *ngIf="tipoOperacion == 1">
      <!-- Fecha de vencimiento -->
      <div class="col-lg-6 col-sm-12 pr-xl-3">
        <div class="form-group">
          <label for="fecha_vencimiento_venta">Fecha de vencimiento </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>
    </div>

    <div class="row">
      <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>

        <!-- COMPRA -->
        <div class="col-12">
          <h3>
            Instrumento de compra
          </h3>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 1
          "
        >
          <h4>NO APLICA</h4>
        </div>

        <div
          class="row align-container"
          *ngIf="
            operation_result == true &&
            (tipoOperacion == 0 || tipoEjecucion == 1)
          "
        >
          <div class="col-sm-4">
            <h4>Precio unitario:</h4>
            <div class="field">
              $USD {{ precio_unitario_compra | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Comisión broker:</h4>
            <div class="field">
              $USD {{ comision_broker_compra | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Cantidad de contratos:</h4>
            <div class="field">
              {{ cantidad_contratos_compra | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Unidades de contratos:</h4>
            <div class="field">
              {{ unidades_contratos_compra | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Valor transado:</h4>
            <div class="field">
              $USD {{ valor_transado_compra | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Valor pagado:</h4>
            <div class="field">$USD {{ valor_pagado | number: "1.2-4" }}</div>
          </div>

          <div class="col-sm-4">
            <h4>Ganancia / pérdida:</h4>
            <div class="field">
              $USD {{ ganancia_perdida | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Rendimiento:</h4>
            <div class="field">{{ rendimiento | number: "1.2-4" }} %</div>
          </div>

          <div class="col-sm-4">
            <h4>Fecha operación:</h4>
            <div class="field">
              {{ fecha_operacion_compra }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Fecha liquidación:</h4>
            <div class="field">
              {{ fecha_liquidacion_compra }}
            </div>
          </div>

          <div
            class="col-sm-4"
            *ngIf="
              operation_result == true &&
              tipoOperacion == 0 &&
              tipoEjecucion == 1
            "
          >
            <h4>Operación</h4>
            <div class="field">
              {{ corto == 0 ? "Largo" : "Corto" }}
            </div>
          </div>

          <div
            class="col-sm-4"
            *ngIf="
              operation_result == true &&
              tipoOperacion == 0 &&
              tipoEjecucion == 1
            "
          >
            <h4>Fecha vencimiento:</h4>
            <div class="field">
              {{ fecha_vencimiento_compra }}
            </div>
          </div>

          <div
            class="col-sm-4"
            *ngIf="
              operation_result == true &&
              tipoOperacion == 0 &&
              tipoEjecucion == 1
            "
          >
            <h4>Fecha inicio vigencia:</h4>
            <div class="field">
              {{ fecha_inicio_vigencia }}
            </div>
          </div>
        </div>

        <!-- VENTA -->
        <div class="col-12">
          <h3>
            Instrumento de venta
          </h3>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoEjecucion == 0 && tipoOperacion == 0
          "
        >
          <h4>NO APLICA</h4>
        </div>

        <div
          class="row align-container"
          *ngIf="
            operation_result == true &&
            (tipoOperacion == 1 || tipoEjecucion == 1)
          "
        >
          <div class="col-sm-4">
            <h4>Precio unitario:</h4>
            <div class="field">
              $USD {{ precio_unitario_venta | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Comisión broker:</h4>
            <div class="field">
              $USD {{ comision_broker_venta | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Cantidad de contratos:</h4>
            <div class="field">
              {{ cantidad_contratos_venta | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Unidades de contratos:</h4>
            <div class="field">
              {{ unidades_contratos_venta | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Valor transado:</h4>
            <div class="field">
              $USD {{ valor_transado_venta | number: "1.2-4" }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Valor recibido:</h4>
            <div class="field">$USD {{ valor_recibido | number: "1.2-4" }}</div>
          </div>

          <div class="col-sm-4">
            <h4>Fecha operación:</h4>
            <div class="field">
              {{ fecha_operacion_venta }}
            </div>
          </div>

          <div class="col-sm-4">
            <h4>Fecha liquidación:</h4>
            <div class="field">
              {{ fecha_liquidacion_venta }}
            </div>
          </div>

          <div
            class="col-sm-4"
            *ngIf="
              operation_result == true &&
              tipoOperacion == 0 &&
              tipoEjecucion == 1
            "
          >
            <h4>Operación</h4>
            <div class="field">
              {{ corto == 0 ? "Largo" : "Corto" }}
            </div>
          </div>

          <div
            class="col-sm-4"
            *ngIf="
              operation_result == true &&
              tipoOperacion == 0 &&
              tipoEjecucion == 1
            "
          >
            <h4>Fecha vencimiento:</h4>
            <div class="field">
              {{ fecha_vencimiento_venta }}
            </div>
          </div>

          <div
            class="col-sm-4"
            *ngIf="
              operation_result == true &&
              tipoOperacion == 0 &&
              tipoEjecucion == 1
            "
          >
            <h4>Fecha inicio vigencia:</h4>
            <div class="field">
              {{ fecha_inicio_vigencia }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />

    <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>
          Ticker
        </h3>
        <div class="field">
          {{ instrument_work_summary.ticker }}
        </div>
      </div>
      <!-- COMPRA -->
      <div class="col-12">
        <h3>
          Instrumento de compra
        </h3>
      </div>

      <div
        class="col-sm-4"
        *ngIf="
          operation_result == true &&
          instrument_work_summary.completo == 0 &&
          instrument_work_summary.corto == 1
        "
      >
        <h4>NO APLICA</h4>
      </div>

      <div
        class="row align-container"
        *ngIf="
          operation_result == true &&
          (instrument_work_summary.corto == 0 ||
            instrument_work_summary.completo == 1 ||
            (instrument_work_summary.valor_pagado != '' &&
              instrument_work_summary.valor_recibido != ''))
        "
      >
        <div class="col-sm-4">
          <h4>Precio unitario:</h4>
          <div class="field">
            $USD
            {{
              instrument_work_summary.precio_unitario_compra | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Comisión broker:</h4>
          <div class="field">
            $USD
            {{
              instrument_work_summary.comision_broker_compra | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Cantidad de contratos:</h4>
          <div class="field">
            {{
              instrument_work_summary.cantidad_contratos_compra
                | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Unidades de contratos:</h4>
          <div class="field">
            {{
              instrument_work_summary.unidades_contratos_compra
                | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Valor transado:</h4>
          <div class="field">
            $USD
            {{
              instrument_work_summary.valor_transado_compra | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Valor pagado:</h4>
          <div class="field">
            $USD {{ instrument_work_summary.valor_pagado | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Ganancia / pérdida:</h4>
          <div class="field">
            $USD
            {{ instrument_work_summary.ganancia_perdida | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Rendimiento:</h4>
          <div class="field">
            {{ instrument_work_summary.rendimiento | number: "1.2-4" }}%
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha operación:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_operacion_compra }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha liquidación:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_liquidacion_compra }}
          </div>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
          "
        >
          <h4>Operación</h4>
          <div class="field">
            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
          </div>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
          "
        >
          <h4>Fecha vencimiento:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_vencimiento_compra }}
          </div>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
          "
        >
          <h4>Fecha inicio vigencia:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_inicio_vigencia }}
          </div>
        </div>
      </div>

      <!-- VENTA -->
      <div class="col-12">
        <h3>
          Instrumento de venta
        </h3>
      </div>
      <div
        class="col-sm-4"
        *ngIf="
          operation_result == true &&
          instrument_work_summary.completo == 0 &&
          instrument_work_summary.corto == 0
        "
      >
        <h4>NO APLICA</h4>
      </div>

      <div
        class="row align-container"
        *ngIf="
          operation_result == true &&
          (instrument_work_summary.corto == 1 ||
            instrument_work_summary.completo == 1 ||
            (instrument_work_summary.valor_pagado != '' &&
              instrument_work_summary.valor_recibido != ''))
        "
      >
        <div class="col-sm-4">
          <h4>Precio unitario:</h4>
          <div class="field">
            $USD
            {{
              instrument_work_summary.precio_unitario_venta | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Comisión broker:</h4>
          <div class="field">
            $USD
            {{
              instrument_work_summary.comision_broker_venta | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Cantidad de contratos:</h4>
          <div class="field">
            {{
              instrument_work_summary.cantidad_contratos_venta | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Unidades de contratos:</h4>
          <div class="field">
            {{
              instrument_work_summary.unidades_contratos_venta | number: "1.2-4"
            }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Valor transado:</h4>
          <div class="field">
            $USD
            {{ instrument_work_summary.valor_transado_venta | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Valor recibido:</h4>
          <div class="field">
            $USD {{ instrument_work_summary.valor_recibido | number: "1.2-4" }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha operación:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_operacion_venta }}
          </div>
        </div>

        <div class="col-sm-4">
          <h4>Fecha liquidación:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_liquidacion_venta }}
          </div>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
          "
        >
          <h4>Operación</h4>
          <div class="field">
            {{ instrument_work_summary.corto == 0 ? "Largo" : "Corto" }}
          </div>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
          "
        >
          <h4>Fecha vencimiento:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_vencimiento_venta }}
          </div>
        </div>

        <div
          class="col-sm-4"
          *ngIf="
            operation_result == true && tipoOperacion == 0 && tipoEjecucion == 1
          "
        >
          <h4>Fecha inicio vigencia:</h4>
          <div class="field">
            {{ instrument_work_summary.fecha_inicio_vigencia }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>