{{#each this}}
<!-- Product Card Klevu {{@index}} - for styling see product-card-style.css -->
    {{#with this}}
    <div class='product-card product product-id-{{id}}' data-product-sku="{{sku}}" data-product-id="{{id}}">
        <!--<div class="img-wrapper"></div>-->
        <a href="{{url}}" title="{{name}}">
          <img class="product-image" loading="lazy" data-flickity-lazyload="{{imageUrl}}" alt="{{name}}">
        </a>
      <article data-klevu-id="{{id}}" data-sku="{{sku}}" class=" {{#if (eq is_featured_product 'Yes')}}is-featured{{/if}} {{#if (eq inStock 'no')}}is-out-of-stock{{/if}}">
        {{#if tags}}
          <a href="{{tags.[0]}}" class="tagline" title="{{this.[0]}}">{{this.[0]}}</a>
        {{/if}}
        {{#if activity}}
          <a href="{{activity}}" class="tagline" title="{{activity}}">{{activity}}</a>
        {{/if}}
        {{#if camo}}
        <a href="{{camo}}" class="tagline" title="{{camo}}">{{camo}}</a>
        {{/if}}

        <a href="{{url}}" title="{{name}}">
          <p class="h-three">{{name}}</p>
        </a>
        {{#if (and (gt (toFloat salePrice) 0) (lt (toFloat salePrice) (toFloat price)))}}
        <p class="price"><del>${{toFixed price 2}}</del><ins>${{toFixed salePrice 2}}</ins></p>
        {{else}}
        <p class="price">${{toFixed price 2}}</p>
        {{/if}}

        <!-- ratings { { #if (gt ratingCount 0)}}  { { /if}}-->
        <div class="stars-grid" data-total-ratings="{{ratingCount}}">
          <div class="stars" style="--rating: {{rating}};" aria-label="Rating of this product is {{rating}} out of 5." role="figure"></div>
          <a href="{{url}}" class="classic-link" title="reviews, rating: {{rating}}">({{#if (gt ratingCount 0)}}{{ratingCount}}{{else}}0{{/if}})</a>
        </div>

        <!-- TODO: how to format from Klevu? -->
        <div class="swatch-nav" data-variants-count="{{totalVariants}}"
          data-swatches-info="{{swatchesInfo}}">
          <button><img src="{{node.defaultImage.url}}" loading="lazy" alt="variant - {{node.sku}}"></button>
        </div>
        {{#if (eq inStock 'yes')}}
        <!--<span>{{node.sku}} IN STOCK </span>-->
        {{else}}
        <!--<span>{{node.sku}} NOT IN STOCK</span>-->
        {{/if}}
        {{#if (eq is_featured_product 'Yes')}}
        <!--<span>{{node.sku}} IN STOCK </span>-->
        {{else}}
        <!--<span>{{node.sku}} NOT IN STOCK</span>-->
        {{/if}}
      </article>
    </div>
    {{/with}}
{{/each}}