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

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

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

  <!--/.Card image-->

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

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

    <ng-container *ngIf="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">{{ cardModel?.selectedFinancingOption }}</span>
      </h3>
      <div class="row">
        <div class="col-8 small-text-gray">
          <span>Dealer</span>
          <p>{{ cardModel?.dealer }}</p>
        </div>
        <div class="col-4 small-text-gray text-right">
          <span class="space-right ">Estimated Delivery</span>
          <p class="space-right">
            {{ cardModel?.estDeliveryDate | date: "dd/MMM/yyyy" }}
          </p>
        </div>
      </div>
    </ng-container>
    <ng-container *ngIf="!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="cardModel?.chatEnabled"
        >
          <i class="fa fa-comment" aria-hidden="true"></i>
        </button>
        <button
          *ngIf="cardModel?.carSummaryEnabled"
          mdbBtn
          type="button"
          color="white"
          outline="true"
          mdbWavesEffect
          class="btn-car"
          routerLink="{{ '/carsummary/' + 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="cardModel?.actionLabel">
        <app-action-button class="btn-action"
        [actionButtonModel]="cardModel"
        (methodToExecute)="CallReturnMethod($event)"
        >
        </app-action-button>
        <!-- <button
          mdbBtn
          type="button"
          mdbWavesEffect
          class="btn-action action-button"
          (click)="ActionMethod(cardModel?.actionMethodCallbackValues)"
        >
          <i [className]="cardModel?.actionIcon" aria-hidden="true"></i> &nbsp;
          {{ cardModel?.actionLabel }}
        </button> -->
      </div>
    </div>
  </mdb-card-body>
  <!--/.Card content-->
</mdb-card>
<!--/.Card-->
