<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]="['/investment-proposals']">
                  Propuestas de inversión
                </a>
              </li>
              <li class="breadcrumb-item">Aprobar</li>
            </ol>
          </nav>
        </div>
      </div>

      <br />
    </div>
    <br />
    <div class="row justify-content-center">
      <div class="col-12">
        <div class="align-container">
          <div class="card borderless">
            <div class="card-header card-header-icon card-header-rose">
              <h4 class="card-title">
                Resumen de la propuesta
              </h4>
            </div>
            <div class="card-body">
              <div class="align-container">
                <ul class="timeline timeline-simple">
                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-success"
                          >Información general</span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="row">
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Asunto:</h4>
                            <div class="field">
                              {{ subject }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Nombre:</h4>
                            <div class="field">
                              {{ investmentName }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Casa:</h4>
                            <div class="field">
                              {{ financials }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Base:</h4>
                            <div class="field">
                              {{ base_types }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-warning">Instrumento</span>
                        <ng-template instrument-host></ng-template>
                      </div>
                    </div>
                  </li>

                  <li class="timeline-inverted">
                    <div class="timeline-badge"></div>
                    <div class="timeline-panel">
                      <div class="timeline-heading">
                        <span class="badge badge-primary"
                          >Información del pago</span
                        >
                      </div>
                      <div class="timeline-body">
                        <div class="row">
                          <div class="col-sm-6">
                            <h4>Código de la propuesta de inversión:</h4>
                            <div class="field">{{ codigo_inversion }}</div>
                          </div>
                          <div class="col-sm-6">
                            <h4>Monto a pagar:</h4>
                            <div class="field">
                              $USD {{ monto | number: "1.2-4" }}
                            </div>
                          </div>
                          <div class="col-sm-6">
                            <h4>Código:</h4>
                            <div class="field">{{ codigo }}</div>
                          </div>
                          <div class="col-sm-6">
                            <h4>Tipo pago:</h4>
                            <div class="field">{{ tipo_pago }}</div>
                          </div>
                          <div class="col-sm-6">
                            <h4>Cuenta bancaria:</h4>
                            <div class="field">{{ cuenta_bancaria }}</div>
                          </div>
                          <div class="col-sm-6" *ngIf="cuenta_bancaria_destino">
                            <h4>Cuenta bancaria destino:</h4>
                            <div class="field">
                              {{ cuenta_bancaria_destino }}
                            </div>
                          </div>

                          <div class="col-sm-6" *ngIf="emitir_nombre">
                            <h4>Emitir a nombre:</h4>
                            <div class="field">{{ emitir_nombre }}</div>
                          </div>
                          <div class="col-sm-6">
                            <h4>Fecha de vencimiento:</h4>
                            <div class="field">{{ fecha_vencimiento }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>

                <br />

                <div class="review-buttons">
                  <button
                    class="btn btn-danger "
                    (click)="dismiss_proposal()"
                    type="button"
                  >
                    Rechazar pago
                  </button>

                  <button
                    class="btn btn-success "
                    (click)="approve_proposal()"
                    type="button"
                  >
                    Aprobar pago
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
