{{#results}}
<li class="product-result {{flipped}}">
    <div class="product-image-wrapper">
        <img class="product-image desktop non-mobile-block" src="{{imageUrl}}" alt="{{imageAltText}}" loading="lazy" />
        <img class="product-image mobile mobile-only" src="{{mobileImageUrl}}" alt="{{mobileImageAltText}}" loading="lazy"/>
    </div>
    <div class="product-content-wrapper">
        <h3 class="product-header">{{header}}</h3>
        <p class="product-summary">{{summary}}</p>
        <div class="product-prices">

            {{#hasDates}}

            {{#hasProducts}}
            <div class="table-responsive">

                <table class="table table-sm">

                    <tbody>

                        {{#products}}
                        <tr>

                            {{#Available}}
                            <td class="product-{{Key}}" scope="row">{{ProductName}}</td>
                            <td>{{DisplayPrice}}</td>
                            <td>
                                <a class="linkbtndark add-to-cart" data-cartitem="{{CartItemJSON}}" href="#" target="">
                                    <span class="text">{{AddToCartText}}</span>
                                    <span class="fa fa-spinner fa-spin loading-icon"></span>

                                </a>
                            </td>
                            {{/Available}}
                            {{^Available}}
                            <th class="product-{{Key}}" scope="row">{{ProductName}}</th>
                            <td></td>
                            <td><div class="not-avail">{{NotAvailableText}}</div></td>
                            {{/Available}}
                        </tr>

                        {{/products}}

                    </tbody>
                </table>

            </div>
            {{/hasProducts}}
            {{^hasProducts}}
            <div class="table-responsive">
                <table class="table table-sm">
                    <tbody>
                        <tr>
                            <td>{{noPriceResults}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            {{/hasProducts}}

            {{/hasDates}}

        </div>

        {{#hasDates}}
        <a class="button default" href="{{linkLocationHash}}">
            <span class="background"></span>
            <span class="text">{{linkText}}</span>
        </a>
        {{/hasDates}}
        {{^hasDates}}
        <a class="button default" href="{{linkLocation}}">
            <span class="background"></span>
            <span class="text">{{linkText}}</span>
        </a>
        {{/hasDates}}

    </div>
</li>
{{/results}}
{{^results}}
<h3 class="no-results">{{noresults}}</h3>
{{/results}}