<div class="card-discount">
  <!--Card image-->
  <!-- Card -->
  <div class="card card-image" [ngStyle]="overlay_background">
    <!-- Content -->
    <div
      class="text-white text-left d-flex align-items-left rgba-black-light card-discount-overlay"
    >
      <input
        type="image"
        (click)="closeCoupon()"
        class="close-button"
        src="../../../../assets/images/close-blue-big.png"
        alt="Blue Close"
      />

      <div class="row card-discount-overlay-row">
        <div class="col-12">
          <div class="row">
            <div class="col-12 card-title">
              <span>{{ "You've recieved" + " " }}</span>
              <span>{{ couponProps?.discountPercent + " " }}</span>
              <span>{{ couponProps?.discountType }}</span>
            </div>
            <div class="col-12 card-subtitle">
              <span>{{ couponProps?.salutation + " " }}</span>
              <span>{{ couponProps?.name }}</span>
              <span>{{
                ", to show our appreciation for your continued patronage, you've recieved a "
              }}</span>
              <span>{{ couponProps?.discountPercent + " " }}</span>
              <span>{{ couponProps?.discountType }}</span>
              <span>{{
                " off your total drive-away price. Thank you for being part of the Mercedes Experience."
              }}</span>
            </div>
            <div class="col-12 col-hr">
              <hr />
            </div>
          </div>
          <div class="row">
            <div class="col-12">
              <div class="row">
                <div class="col-12">
                  <span class="small-text-gray small-text-gray-primary"
                    >You updated Price</span
                  >
                </div>
              </div>
              <div class="row">
                <div class="col-6">
                  <div class="row">
                    <div class="col-12">
                      <span class="large-text-blue">{{
                        couponProps?.finalPrice | number: "1.2-2"
                      }}</span>
                      <span class="med-text-currency"
                        >{{ " " + couponProps?.currency }}
                      </span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <span class="small-text-gray small-text-gray-primary">
                        <s>{{
                          (couponProps?.originalPrice | number: "1.2-2") +
                            " " +
                            couponProps?.currency
                        }}</s>
                      </span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <span class="small-text-gray small-text-gray-secondary">
                        You save</span
                      >
                      <span class="small-text-gray small-text-gray-tertiary">
                        {{
                          (couponProps?.originalPrice - couponProps?.finalPrice
                            | number: "1.2-2") +
                            " " +
                            couponProps?.currency
                        }}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="col-6">
                  <button
                    type="button"
                    mdbBtn
                    class="voucher-btn"
                    mdbWavesEffect
                    (click)="closeCoupon()"
                  >
                    <i
                      class="fa fa-gift voucher-btn-icon"
                      aria-hidden="true"
                    ></i>
                    <span>
                      Accept Voucher
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Content -->
  </div>
  <!-- Card -->
</div>
