<div class="why-not-add-card" data-product-code="{{code}}">
  <a
      href="{{url}}"
      target="_blank"
      class="why-not-add-card__image-link"
      aria-label="{{name}}"
  >
    {{#if image.url}}
      <img
          class="why-not-add-card__image"
          src="{{image.url}}"
          alt="{{image.altText}}"
      >
    {{/if}}
  </a>

  <div class="why-not-add-card__content">
    <a href="{{url}}" target="_blank" class="why-not-add-card__title">
      {{name}}
    </a>

    <div class="reviews">
      <div class="rating-bg">
        <i class="fa fa-star star-in" aria-hidden="true"></i>
        <i class="fa fa-star star-in" aria-hidden="true"></i>
        <i class="fa fa-star star-in" aria-hidden="true"></i>
        <i class="fa fa-star star-in" aria-hidden="true"></i>
        <i class="fa fa-star star-in" aria-hidden="true"></i>

        <div
            class="rating-overlay"
            data-rating="{{#if externalAverageRating}}{{externalAverageRating}}{{else}}0{{/if}}"
        >
          <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
          <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
          <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
          <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
          <span class="star-overlay"><i class="fa fa-star" aria-hidden="true"></i></span>
        </div>
      </div>

      <span class="reviews-count">
        ({{#if externalReviewCount}}{{externalReviewCount}}{{else}}0{{/if}})
      </span>
    </div>

    <div class="why-not-add-card__bottom">
      <div class="why-not-add-card__price-wrap">
        <div class="why-not-add-card__price {{#if wasPriceFormatted}}why-not-add-card__price--sale{{/if}}">
          {{#if wasPriceFormatted}}
            <span class="why-not-add-card__was-price">
              {{#if switch-vat}}
                <span class="including-vat-inherit">{{incVatWasPriceFormatted}}</span>
                <span class="excluding-vat-inherit">{{excVatWasPriceFormatted}}</span>
              {{else}}
                {{wasPriceFormatted}}
              {{/if}}
            </span>

            <span class="why-not-add-card__sale-price">
              {{#if switch-vat}}
                <span class="including-vat-inherit">{{incVatFormattedValue}}</span>
                <span class="excluding-vat-inherit">{{excVatFormattedValue}}</span>
              {{else}}
                {{price.formattedValue}}
              {{/if}}
            </span>
          {{else}}
            <span class="why-not-add-card__regular-price">
              {{#if switch-vat}}
                <span class="including-vat-inherit">{{incVatFormattedValue}}</span>
                <span class="excluding-vat-inherit">{{excVatFormattedValue}}</span>
              {{else}}
                {{price.formattedValue}}
              {{/if}}
            </span>
          {{/if}}
        </div>

        {{#if switch-vat}}
          <div class="why-not-add-card__vat-label">
            <span class="including-vat-inherit">Inc. VAT</span>
            <span class="excluding-vat-inherit">Exc. VAT</span>
          </div>
        {{/if}}

        <div class="why-not-add-card__delivery">Excluding delivery</div>
      </div>

      <button
          class="why-not-add-card__cta"
          type="button"
          aria-label="Add {{name}} to basket"
          data-why-not-add-cta
      >
        <span class="why-not-add-card__cta-icon">
          <i class="fas fa-shopping-basket"></i>
        </span>

        <span class="why-not-add-card__cta-loader d-none">
          {{> loader modifier="why-not-add-card__loader"}}
        </span>
      </button>
    </div>
  </div>
</div>