<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">Hoja de liquidación</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">
                Subir archivo de hoja de liquidación
              </h4>
            </div>
            <div class="card-body">
              <div class="align-container">
                <div class="instrument-calcs">
                  <div class="row">
                    <div class="col-12">
                      <span class="badge badge-success badge-custom"
                        >Información básica de la inversión</span
                      >
                    </div>
                    <div class="col-sm-12">
                      <h4>Estado de la propuesta de inversión:</h4>
                      <div class="field">{{ estado }}</div>
                    </div>
                    <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>Instrumento:</h4>
                      <div class="field">{{ instrumento }}</div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Emisor:</h4>
                      <div class="field">{{ emisor }}</div>
                    </div>
                    <div class="col-sm-6">
                      <h4>Empresa:</h4>
                      <div class="field">{{ empresa }}</div>
                    </div>
                  </div>
                </div>

                <br />

                <form
                  class="form-auth-small ng-untouched ng-pristine ng-valid"
                  [formGroup]="investmentProposalForm"
                >
                  <div class="row">
                    <div class="col-lg-6 col-sm-12 pr-xl-6">
                      <div class="form-group">
                        <label for="hoja_liquidacion">Archivo: </label>

                        <input
                          type="file"
                          name="hoja_liquidacion"
                          (change)="fileProgress($event)"
                          [ngClass]="{
                            'is-invalid': submitted && fileData == null
                          }"
                        />
                        <div
                          *ngIf="submitted && fileData == null"
                          class="invalid-feedback"
                        >
                          Campo requerido
                        </div>
                      </div>
                      <br />
                      <div *ngIf="fileUploadProgress">
                        Progreso: {{ fileUploadProgress }}
                      </div>
                      <div class="image-preview mb-3" *ngIf="previewUrl">
                        <img [src]="previewUrl" height="300" />
                      </div>

                      <div class="mb-3" *ngIf="uploadedFilePath">
                        {{ uploadedFilePath }}
                      </div>
                    </div>
                  </div>
                  <br />
                  <div class="row">
                    <div class="col-lg-12 col-sm-12 align-right">
                      <div class="form-group">
                        <button
                          class="btn btn-primary"
                          (click)="onSubmit(investmentProposalForm)"
                          type="submit"
                        >
                          Subir archivo
                        </button>
                      </div>
                    </div>
                  </div>
                  <br />
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
