<article class="listItem" data-event-type="{{event}}" data-entity-id="{{id}}" data-position="{{position}}" data-name="{{name}}" data-product-category="{{#each category}}{{#if @last}}{{this}}{{else}}{{this}}, {{/if}}{{/each}}" data-product-brand="{{brand.name}}" data-product-price="
    {{#or customer (unless settings.hide_price_from_guests)}}
        {{#if price.with_tax}}
            {{price.with_tax.value}}
        {{else}}
            {{price.without_tax.value}}
        {{/if}}
    {{else}}
        {{lang 'common.login_for_pricing'}}
    {{/or}}">
    <figure class="listItem-figure">
        <a href="{{url}}"
           class="listItem-figure__link"
           aria-label="{{> components/products/product-info}}"
           data-event-type="product-click"
        >
        {{#if stock_level '===' 0}}
            {{#if theme_settings.pdp_sold_out_label '===' ''}}
                {{> components/products/product-badge
                    badge-type='sold-out'
                    badge_view=theme_settings.product_sold_out_badges
                    badge_label=(lang "page_builder.pdp_sold_out_label")
                }}
            {{else}}
                {{> components/products/product-badge
                    badge-type='sold-out'
                    badge_view=theme_settings.product_sold_out_badges
                    badge_label=theme_settings.pdp_sold_out_label
                }}
            {{/if}}
        {{else}}
            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
                {{#if theme_settings.pdp_sale_badge_label '===' ''}}
                    {{> components/products/product-badge
                        badge-type='sale'
                        badge_view=theme_settings.product_sale_badges
                        badge_label=(lang "page_builder.pdp_sale_badge_label")
                    }}
                {{else}}
                    {{> components/products/product-badge
                        badge-type='sale'
                        badge_view=theme_settings.product_sale_badges
                        badge_label=theme_settings.pdp_sale_badge_label
                    }}
                {{/if}}
            {{/or}}
        {{/if}}
        {{> components/common/responsive-img
            image=image
            class="listItem-image"
            fallback_size=theme_settings.productgallery_size
            lazyload=theme_settings.lazyload_mode
            default_image=theme_settings.default_image_product
        }}
        </a>
        {{#unless hide_product_quick_view}}
            {{#if theme_settings.show_product_quick_view}}
                <div class="listItem-figureBody">
                    <button type="button" data-event-type="product-click" class="button button--small listItem-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</button>
                </div>
            {{/if}}
        {{/unless}}
    </figure>
    <div class="listItem-body">
        <div class="listItem-content">
            <div class="listItem-details">
                {{#if show_rating}}
                    <p class="listItem-rating">{{> components/products/ratings rating_target=name rating=rating}}</p>
                {{/if}}
                {{#if brand.name}}
                <p class="listItem-brand">{{brand.name}}</p>
                {{/if}}
                <h4 class="listItem-title">
                    <a href="{{url}}"
                    aria-label="{{> components/products/product-info}}"
                    data-event-type="product-click"
                    >
                        {{name}}
                    </a>
                </h4>
                {{#if summary}}
                    <p>{{{summary}}}</p>
                {{/if}}
            </div>
            <div class="listItem-actions">
                {{#or customer (unless settings.hide_price_from_guests)}}
                    {{#if price}}
                        <div class="listItem-price">{{> components/products/price price=price}}</div>
                        {{{region name="product_item_below_price"}}}
                    {{/if}}
                {{else}}
                    {{> components/common/login-for-pricing}}
                {{/or}}
                {{#if show_cart_action}}
                    {{#if has_options}}
                        <a href="{{url}}" data-event-type="product-click" class="button button--small" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
                    {{/if}}
                    {{#if pre_order}}
                        <a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--primary">{{lang 'products.pre_order'}}</a>
                    {{/if}}
                    {{#if add_to_cart_url }}
                        <a href="{{add_to_cart_url}}" data-event-type="product-click" class="button button--primary">{{lang 'products.add_to_cart'}}</a>
                    {{/if}}
                    {{#if out_of_stock_message }}
                        <a href="{{url}}" data-event-type="product-click" class="button button--small" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                    {{/if}}
                {{/if}}
                {{#if show_compare}}
                    <label class="button button--small" for="compare-{{id}}">
                        {{lang "products.compare"}} <input type="checkbox" name="products[]" value="{{id}}" id="compare-{{id}}" data-compare-id="{{id}}">
                    </label>
                {{/if}}
            </div>
        </div>
    </div>
</article>
