<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 align-right">
        <div class="align-container">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <a [routerLink]="['/']">Dashboard</a>
              </li>
              <li class="breadcrumb-item">
                <a [routerLink]="['/investments']">
                  Inversiones
                </a>
              </li>
              <li class="breadcrumb-item">Depósito a plazo</li>
            </ol>
          </nav>
        </div>
      </div>

      <div class="col-12">
        <div class="align-container">
          <div class="card borderless card-wrapper">
            <div class="wrapper-costs">
              <h4 class="card-title">
                Detalle de costos para el deposito
              </h4>
              <br />
              <div class="align-container">
                <div>
                  <div class="costs-summary">
                    <div class="row">
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Monto inversión:</h4>
                        <div class="field">
                          $USD
                          {{
                            instrument_work.monto_inversion | number: "1.2-4"
                          }}
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Plazo en días:</h4>
                        <div class="field">
                          {{ instrument_work.plazo }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Tasa porcentaje:</h4>
                        <div class="field">
                          {{
                            instrument_work.tasa_porcentaje | number: "1.2-4"
                          }}
                          %
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Renta porcentaje:</h4>
                        <div class="field">
                          {{
                            instrument_work.renta_porcentaje | number: "1.2-4"
                          }}
                          %
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Renta:</h4>
                        <div class="field">
                          $USD {{ instrument_work.renta | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Ingreso bruto:</h4>
                        <div class="field">
                          $USD
                          {{ instrument_work.ingreso_bruto | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Ingreso neto:</h4>
                        <div class="field">
                          $USD
                          {{ instrument_work.ingreso_neto | number: "1.2-4" }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Rendimiento bruto:</h4>
                        <div class="field">
                          $USD
                          {{
                            instrument_work.rendimiento_bruto | number: "1.2-4"
                          }}
                        </div>
                      </div>
                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Rendimiento neto:</h4>
                        <div class="field">
                          $USD
                          {{
                            instrument_work.rendimiento_neto | number: "1.2-4"
                          }}
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha de operación:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_operacion }}
                        </div>
                      </div>

                      <div class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Fecha vencimiento:</h4>
                        <div class="field">
                          {{ instrument_work.fecha_vencimiento }}
                        </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 class="col-lg-3 col-md-4 col-sm-6">
                        <h4>Número de certificado:</h4>
                        <div class="field">
                          {{
                            instrument_work.numero_certificado == undefined ||
                            instrument_work.numero_certifcado == ""
                              ? "-"
                              : instrument_work.numero_certificado
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <br />
              <br />
              <div class="align-container">
                <form *ngIf="dataRetrieved" [formGroup]="form">
                  <div *ngFor="let group of form.controls; let i = index">
                    <div class="wrapper-form" [formGroup]="group">
                      <div class="costs-input-small-container">
                        <div class="form-group">
                          <label for="posicion">Posicion: </label>

                          <div class="input-box-container">
                            <input
                              type="text"
                              formControlName="posicion"
                              class="form-control"
                              readonly
                            />
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-small-container">
                        <div class="form-group">
                          <label for="plazo">Plazo: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="far fa-clock" aria-hidden="true"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="plazo"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="fecha_pago">Fecha pago: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i
                                  class="far fa-calendar"
                                  aria-hidden="true"
                                ></i>
                              </p>
                              <input
                                type="text"
                                formControlName="fecha_pago"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="ingreso_bruto">Ingreso bruto: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="ingreso_bruto"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="renta">Renta: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="renta"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="costs-input-normal-container">
                        <div class="form-group">
                          <label for="ingreso_neto">Ingreso neto: </label>

                          <div class="input-box-container">
                            <div>
                              <p>
                                <i class="fas fa-dollar-sign"></i>
                              </p>
                              <input
                                type="text"
                                formControlName="ingreso_neto"
                                class="form-control"
                              />
                            </div>
                          </div>
                        </div>
                      </div>

                      <input
                        type="hidden"
                        formControlName="id_deposito_plazo"
                      />
                      <div class="clear"></div>
                    </div>
                  </div>
                  <br />
                  <!--
                  <div class="form-group text-right space-20">
                    <button
                      type="submit"
                      class="btn btn-primary"
                      (click)="submitProjectionChanges()"
                    >
                      Guardar información de proyecciones
                    </button>
                  </div>-->
                  <br />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <br />
    </div>
  </div>
</div>
