<div class="col-12 h-card">
  <div  class="row">
      <div class="col-5">
          <img *ngIf="cardValues?.cardModel?.imageURL" class="h-card-image" src="{{ cardValues?.cardModel?.imageURL }}" alt="Card image cap"/>
        </div>
        <div class="col-7 h-card-content">
            <div class="white-text">
                {{ cardValues?.cardModel?.carName }}

                  <h3>
                    {{ cardValues?.cardModel?.amount | number: "1.2-2" }}
                    <span class="card-w-text-gray">{{ cardValues?.cardModel?.currency }}</span>
                    <span class="card-w-text-gray" *ngIf="cardValues?.cardModel?.selectedFinancingOption"> {{ " " + cardModel?.paymentType }} </span>
                  </h3>

                  <div class="row">
                    <div class="col-4">
                        <label>Selected Financing Option</label>
                        {{ cardValues?.cardModel?.selectedFinancingOption }}
                    </div>
                    <div class="col-4">
                        <label>Dealer</label>
                        {{ cardValues?.cardModel?.dealer }}
                    </div>
                    <div class="col-4">
                        <label>Estimated Delivery</label>
                        {{ cardValues?.cardModel?.estDeliveryDate | date: "dd/MMM/yyyy" }}
                    </div>
                  </div>

                <ng-container *ngIf="!cardValues?.cardModel?.selectedFinancingOption">
                  <p class="empty-space-fill"></p>
                </ng-container>
                <div class="row">
                  <div class="col-6 col-btn">
                    <button
                      mdbBtn
                      type="button"
                      color="white"
                      outline="true"
                      mdbWavesEffect
                      class="btn-comment btn-space-right"
                      *ngIf="cardValues?.cardOptions?.chatEnabled"
                    >
                      <i class="fa fa-comment" aria-hidden="true"></i>
                    </button>
                    <button
                      *ngIf="cardValues?.cardOptions?.carSummaryEnabled"
                      mdbBtn
                      type="button"
                      color="white"
                      outline="true"
                      mdbWavesEffect
                      class="btn-car"
                      routerLink="{{ '/stock/car' + cardValues?.cardModel?.id }}"
                    >
                      <i class="fa fa-car" aria-hidden="true"></i> &nbsp; Car Summary
                    </button>
                  </div>
            
                  <div class="col-6 col-btn text-right" *ngIf="cardValues?.cardOptions?.actionLabel">
                    <button
                      mdbBtn
                      type="button"
                      mdbWavesEffect
                      class="btn-checkout split-dropdown-button"
                      (click)="ActionMethod(cardValues?.cardOptions?.actionMethodCallbackValues)"
                    >
                      <i [className]="cardValues?.cardOptions?.actionIcon" aria-hidden="true"></i> &nbsp;
                      {{ cardValues?.cardOptions?.actionLabel }}
                    </button>
                  </div>
                </div>
              </div>
          
        </div>
  </div>
  

  

</div>
