<div class="card complete-card {{modification}}" data-product-code="{{code}}">
  {{#if badge}}
    <div
        class="complete-card__badge"
        style="background-color: {{badge.color}}; color: {{badge.textColor}};"
    >
      {{badge.text}}
    </div>
  {{/if}}

  <div class="complete-card__inner">
    <div class="complete-card__select">
      {{> checkbox id=checkboxId action="true" checked=checked name=name}}
    </div>

    <div class="complete-card__img-wrap">
      {{#if image.url}}
        <img class="complete-card__img" src="{{image.url}}" alt="{{image.altText}}">
      {{/if}}
    </div>

    <div class="complete-card__content">
      <div class="complete-card__header">
        <a href="{{url}}" target="_blank" class="complete-card__title">
          {{name}}
        </a>

        <div class="complete-card__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>

            <span class="complete-card__reviews-count">
                (<span class="complete-card__reviews-count-value">{{externalReviewCount}}</span>)
            </span>
          </div>
        </div>
      </div>
      <div class="complete-card__options">
        {{#if dropdownOptions.length}}
          {{> bloomreach/complete-card-dropdown
              id=checkboxId
              placeholder="Select option"
              options=dropdownOptions
              selectedValue=selectedDropdownValue
              selectedLabel=selectedDropdownLabel
              error=dropdownError
          }}
        {{/if}}
      </div>

      <div class="complete-card__count-stepper count-stepper">
        <label for="card-count-{{checkboxId}}" class="quantity-label">
          Quantity:
        </label>

        <input
            type="text"
            inputmode="numeric"
            required=""
            pattern="[0-9]*\d"
            id="card-count-{{checkboxId}}"
            class="tbx tbx_quantity"
            value="1"
            readonly
        >
      </div>

      <div class="complete-card__bottom">
        <div class="complete-card__price {{#if wasPriceFormatted}}complete-card__price_sale{{/if}}">
          {{#if showFromPrice}}
            <div class="complete-card__price_from">From</div>
          {{/if}}

          {{#if wasPriceFormatted}}
            <div class="complete-card__price-value">
              {{#if switch-vat}}
                <span class="including-vat-inherit">{{incVatWasPriceFormatted}}</span>
                <span class="excluding-vat-inherit">{{excVatWasPriceFormatted}}</span>
              {{else}}
                {{wasPriceFormatted}}
              {{/if}}
            </div>

            <div class="complete-card__price__sale-price">
              {{#if switch-vat}}
                <span class="including-vat-inherit">{{{incVatFormattedValue}}}</span>
                <span class="excluding-vat-inherit">{{{excVatFormattedValue}}}</span>
              {{else}}
                {{{price.formattedValue}}}
              {{/if}}
            </div>
          {{else}}
            <div class="complete-card__price-value">
              {{#if switch-vat}}
                <span class="including-vat-inherit">{{{incVatFormattedValue}}}</span>
                <span class="excluding-vat-inherit">{{{excVatFormattedValue}}}</span>
              {{else}}
                {{{price.formattedValue}}}
              {{/if}}
            </div>
          {{/if}}

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

        <p class="complete-card__delivery">Excluding delivery</p>
      </div>
    </div>
  </div>
</div>