<div class="summary-header">
  <div class="row summary-header__section-top">
    <div class="col-4 summary-header__price">
      {{vehicleLabelsData?.vehicleTotalPrice}}
      <span>{{vehicleHeaderData?.VehicleTotalPrice}} <b>KRW</b></span>
    </div>
    <div class="col-8 summary-header__title">
      {{vehicleLabelsData?.vehicle_your}} {{vehicleHeaderData?.ModelName}}
    </div>
  </div>
  <div class="row">
    <div class="col-6 summary-header__button-left">
      <a class="summary-header__btn-test" (click)="drive()">{{vehicleLabelsData?.vehicle_testDrive}}</a>
      <a class="summary-header__btn-edit" (click)="editInformation()">{{vehicleLabelsData?.vehicle_editFinanceOption}}</a>
      <a class="summary-header__btn-mail" (click)="mailToSelf()">{{vehicleLabelsData?.vehicle_mailToMyself}}</a>
    </div>
    <div class="col-6 summary-header__button-right">
      <a class="summary-header__btn-wishlist" (click)="wishList()">{{vehicleLabelsData?.vehicle_addWishlist}}</a>
      <a class="summary-header__btn-finoption" (click)="financingOptions()">{{vehicleLabelsData?.vehicle_financeOption}}</a>
    </div>
  </div>
</div>


<div mdbModal #basicModal="mdbModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">{{vehicleLabelsData?.vehicle_financeOption}}</h4>
      </div>
      <div class="modal-body">
        <div class="form-head">{{vehicleLabelsData?.vehicle_basicTaxInfo}}</div>

        <form>
          <div class="p-4">
              <div class="form-greybg">
                  <div class="form-row mb-4">
                    <div class="col">
                      <label>{{vehicleLabelsData?.vehicle_formLabelState}}</label>
                      <select class="browser-default custom-select mb-4">
                        <option value="" disabled>Choose option</option>
                        <option value="1" selected>Busan</option>
                        <option value="2">Jurong</option>
                        <option value="3">Bugis</option>
                        <option value="4">Outram</option>
                      </select>
                    </div>
                    <div class="col">
                      <label>{{vehicleLabelsData?.vehicle_formLabelPostal}}<span class="warning financial-msg">{{vehicleLabelsData?.vehicle_formValidationPostal}}</span></label>
                      <input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
                    </div>
                  </div>
                  <div class="form-row">
                    <div class="col">
                      <label>{{vehicleLabelsData?.vehicle_formLabelPrivate}}</label>
                      <div class="custom-control custom-checkbox">
                        <span class="fixwidth">
                          <input type="checkbox" class="custom-control-input" id="privateCheckbox">
                          <label class="custom-control-label" for="privateCheckbox">Private</label>
                        </span>
                        <span class="fixwidth">
                          <input type="checkbox" class="custom-control-input" id="businessCheckbox">
                          <label class="custom-control-label" for="businessCheckbox">Business</label>
                        </span>
                      </div>
                    </div>
                    <div class="col">
                      <label>{{vehicleLabelsData?.vehicle_formLabelInsurer}}</label>
                      <select class="browser-default custom-select mb-4">
                        <option value="" disabled>Choose option</option>
                        <option value="1" selected>43</option>
                        <option value="2">22</option>
                        <option value="3">23</option>
                        <option value="4">56</option>
                      </select>
                      <!-- <input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name" aria-describedby="defaultRegisterFormPasswordHelpBlock"> 
                          <small id="defaultRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
                            At least 8 characters and 1 digit
                          </small> -->
                    </div>
                  </div>
                </div>
                <div class="financial-head">{{vehicleLabelsData?.vehicle_selectFinanceOption}}<span class="warning financial-msg">{{vehicleLabelsData?.vehicle_formValidationfinanceOption}}</span></div>

                <app-financing-options-list class="financial-body"
                *ngIf="financingOptionsItems && financingOptionsItems.length !== 0"
                [financingOptionsItems]="financingOptionsItems"
              >
              </app-financing-options-list>
                <!-- <div class="row financial-body" *ngIf="financingOptionsItems.length != 0">
                    <div class="col-3" *ngFor="let fo of financingOptionsItems; index as i">
                        <app-financing-options [financingOptionsItem]="fo">
                        </app-financing-options>
                    </div>
                </div> -->

                <div class="form-greybg p-4 terms-conditions">
                    <div class="terms-conditions-box">
                      {{vehicleLabelsData?.vehicle_termsConditionsText}}
                    </div>
                </div>

                <div class="custom-control custom-checkbox">
                    <span>
                      <input type="checkbox" class="custom-control-input" id="termsconditions">
                      <label class="custom-control-label" for="termsconditions">{{vehicleLabelsData?.vehicle_termsConditions}}</label>
                    </span>
                  </div>
          </div>

          <div class="info-box">
            <span class="info-icon"></span>
            <label>{{vehicleLabelsData?.vehicle_completeTaxLabel}}</label>
          </div>
          <div class="modal-footer">
            <div class="col">
              <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()"
              mdbWavesEffect>{{vehicleLabelsData?.vehicle_buttonCancel}}</button>
            </div>
            <div class="col text-right">
              <button mdbBtn color="info" type="submit">{{vehicleLabelsData?.vehicle_buttonApply}}</button>
            </div>
          </div>


        </form>
      </div>
    </div>
  </div>
</div>


<div mdbModal #mailModal="mdbModal" class="modal fade mailModel" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
  aria-hidden="true">
 <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">{{vehicleLabelsData?.vehicle_mailToMyself}}</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-body">
              <div class="form-head">{{vehicleLabelsData?.vehicle_mailMyselfHeadingPrefix}} {{vehicleHeaderData?.ModelName}} {{vehicleLabelsData?.vehicle_mailMyselfHeadingSuffix}}</div>
              <div class="form-email">
                  <label>{{vehicleLabelsData?.vehicle_formLabelEmail}}<span class="warning financial-msg">{{vehicleLabelsData?.vehicle_formValidationEmail}}</span></label>
                  <input type="text" id="mailtomyselfemail" class="form-control" placeholder=" {{vehicleLabelsData?.vehicle_formPlaceholderEmail}}">
              </div>
          </div>

          <div class="modal-footer">
            <div class="col">
              <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="mailModal.hide()"
              mdbWavesEffect>{{vehicleLabelsData?.vehicle_buttonCancel}}</button>
            </div>
            <div class="col text-right">
              <button mdbBtn color="info" type="submit">{{vehicleLabelsData?.vehicle_buttonSubmit}}</button>
            </div>
          </div>
          </form>
          </div>
          </div>
          </div>
          </div>
          
