<!--Card-->
<mdb-card dark="true" class="card-component">
  <!--Card image-->
  <img
    *ngIf="cardValues?.cardModel?.imageURL"
    class="card-img-top col-12"
    src="{{ cardValues?.cardModel?.imageURL }}"
    alt="Card image cap"
  />

  <img
    *ngIf="!cardValues?.cardModel?.imageURL"
    class="card-img-top col-12"
    src="{{ '../../../../assets/images/Image_Vehicle_Black.png' }}"
    alt="Card image cap"
  />
  <div class="section-absolute text-right">
    <button
      *ngIf="cardValues?.cardOptions?.addWishEnabled"
      type="button"
      mdbBtn
      class="section-absolute-button section-absolute-button-secondary"
      mdbWavesEffect
      (click)=" ActionMethod(cardValues?.cardOptions?.addWishActionCallbackValues)"
      (mouseenter)="toggleExpansion()"
      (mouseleave)="toggleExpansion()"
    >
      <i class="fa fa-star" aria-hidden="true"> </i>
      <ng-container *ngIf="cardValues?.cardOptions?.addWishExpanded"
        ><span>Add to Wishlist </span>
      </ng-container>
    </button>

    <button
      *ngIf="cardValues?.cardOptions?.removeEnabled"
      type="button"
      mdbBtn
      class="section-absolute-button section-absolute-button-primary"
      mdbWavesEffect
      (click)="ActionMethod(cardValues?.cardOptions?.removeActionCallbackValues)"
    >
      <i class="fa fa-times" aria-hidden="true"></i>
    </button>
  </div>

  <!--/.Card image-->

  <!--Card content-->
  <mdb-card-body class="card-component-background white-text">
    <!--Title-->
    <mdb-card-title class="card-component-title">
      <div class="row">
        <div class="col-9">
          <h2 class="card-component-head-sectionead-section">
            <span class="card-component-head-section card-component-head-section-left">
              {{ cardValues?.cardModel?.carName }}
            </span>
          </h2>
        </div>
        <div
          *ngIf="
          cardValues?.dropdownValues && cardValues?.dropdownValues.length !== 0
          "
          class="col-3"
        >
          <sts-dropdown
            class="space-right"
            (methodToExecute)="ActionMethod($event)"
            [dropdownValues]="cardValues?.dropdownValues"
          ></sts-dropdown>
        </div>
      </div>

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

    <ng-container *ngIf="cardValues?.cardModel?.selectedFinancingOption">
      <hr class="hr space-right" />
      <!--Text-->
      <h6 class="small-text-gray-hr"><span>Selected Financing Option</span></h6>
      <h3>
        <span class="text-blue">{{ cardValues?.cardModel?.selectedFinancingOption }}</span>
      </h3>
      <div class="row">
        <div class="col-8 small-text-gray">
          <span>Dealer</span>
          <p>{{ cardValues?.cardModel?.dealer }}</p>
        </div>
        <div class="col-4 small-text-gray text-right">
          <span class="space-right ">Estimated Delivery</span>
          <p class="space-right">
            {{ cardValues?.cardModel?.estDeliveryDate | date: "dd/MMM/yyyy" }}
          </p>
        </div>
      </div>
    </ng-container>
    <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="{{ '/stocks/car/' + cardValues?.cardModel?.id }}"
        >
          <i class="fa fa-car" aria-hidden="true"></i>Car Summary
        </button>
      </div>

      <div class="col-6 col-btn text-right" *ngIf="cardValues?.cardOptions?.actionLabel">
        <sts-action-button class="btn-action"
        [actionButtonModel]="cardValues?.cardOptions"
        (methodToExecute)="ActionMethod($event)"
        >
        </sts-action-button>
      </div>
    </div>
  </mdb-card-body>
  <!--/.Card content-->
</mdb-card>
<!--/.Card-->
