<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">Detalle propuesta</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>Orígenes de fondo:</h4>
                            <div class="field">
                              {{ funds }}
                            </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>Tipo Tasa:</h4>
                            <div class="field">
                              {{ rates }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo Renta:</h4>
                            <div class="field">
                              {{ revenues }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Periodicidad:</h4>
                            <div class="field">
                              {{ periodicities }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Instrumentos:</h4>
                            <div class="field">
                              {{ instrumentTypes }}
                            </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 class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipo de mercado:</h4>
                            <div class="field">
                              {{ markets }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Emisores:</h4>
                            <div class="field">
                              {{ emitters }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Empresa:</h4>
                            <div class="field">
                              {{ companies }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>País:</h4>
                            <div class="field">
                              {{ countries }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Plazo:</h4>
                            <div class="field">
                              {{ payment_terms }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Tipos de operaciones:</h4>
                            <div class="field">
                              {{ operations }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Comentarios:</h4>
                            <div class="field">
                              {{ comment }}
                            </div>
                          </div>
                          <div class="col-lg-3 col-md-4 col-sm-6">
                            <h4>Justificación:</h4>
                            <div class="field">
                              {{ justification }}
                            </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>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
