{{#if settings.data_tag_enabled}}
    <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="{{#if price.with_tax}}{{price.with_tax.value}}{{else}}{{price.without_tax.value}}{{/if}}">
{{else}}
    <article class="listItem" >
{{/if}}
    <figure class="listItem-figure">
        <a href="{{url}}"
           class="listItem-figure__link"
           aria-label="{{name}},{{> components/products/product-aria-label}}"
           {{#if settings.data_tag_enabled}}
           data-event-type="product-click"
           {{/if}}
        >
        {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
            {{#if theme_settings.product_sale_badges '===' 'sash'}}
                <div class="sale-flag-sash">
                    <span class="sale-text">On Sale!</span>
                </div>
            {{else if theme_settings.product_sale_badges '===' 'topleft'}}
                <div class="sale-flag-side">
                    <span class="sale-text">On Sale!</span>
                </div>
            {{else if theme_settings.product_sale_badges '===' 'burst'}}
                <div class="starwrap">
                    <div class="sale-text-burst">On Sale!</div>
                    <div class="sale-flag-star"></div>
                </div>
            {{/if}}
        {{/or}}
        {{> 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" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} 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=rating}}</p>
                {{/if}}
                {{!--
                    {{#if brand.name}}
                    <p class="listItem-brand">{{brand.name}}</p>
                    {{/if}}
                --}}
                {{#filter custom_fields '_is_new' property="name"}}
                    {{#or value '==' 'yes' value '==' 'Yes'}}
                        <span class="is_new-badge">NEW</span>
                    {{/or}}
                {{/filter}}
                <h4 class="listItem-title">
                    <a href="{{url}}"
                    aria-label="{{name}},{{> components/products/product-aria-label}}"
                    {{#if settings.data_tag_enabled}}
                    data-event-type="product-click"
                    {{/if}}
                    style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
                    >
                        {{name}}
                    </a>
                </h4>

                {{!--
                {{#if summary}}
                    <p class="product_summary">{{{summary}}}</p>
                {{/if}}
                --}}

                {{#filter custom_fields 'Description' property="name"}}
                <p class="product_summary" style="display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">{{value}}</p>
                {{/filter}}
            </div>
            <div class="listItem-stocks">

                {{!--
                    {{#filter custom_fields 'In stock' property="name"}}
                    {{#if value '>' '0'}}
                        <span>{{lang 'pdp.instock' value=value}}</span>
                    {{/if}}
                    {{/filter}}
                    {{#filter custom_fields 'On order' property="name"}}
                        {{#if value '>' '0'}}
                            <span>{{lang 'pdp.onorder' value=value}}</span>
                            {{#filter ../custom_fields 'On order message' property="name"}}
                                <span>{{value}}</span>
                            {{/filter}}
                        {{/if}}
                    {{/filter}}
                
                {{#unless stock_level '===' null}}
                    {{#if stock_level '>' 0}}
                        <span>{{lang 'pdp.instock' value=stock_level}}</span>
                    {{/if}}
                {{/unless}}
                --}}

                {{#if availability '===' ''}}
                {{else if availability '===' '0'}}
                {{else}}
                <span class="onespan">{{lang 'pdp.instock' value=availability}}</span>

                {{/if}}
                {{#filter custom_fields 'On order' property="name"}}
                    {{#if value '>' 0}}
                    <span>{{lang 'pdp.onorder' value=value}}</span>

                        {{#filter ../custom_fields 'On order message' property="name"}}
                        <span>{{value}}</span>

                        {{/filter}}
                    {{/if}}
                {{/filter}}
            </div>

            <div class="listItem-actions" style="opacity: 0; transition: all ease 0.3s;">
                {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
                    {{#if price}}
                        <div class="listItem-price">{{> components/products/price price=price}}</div>
                    {{/if}}
                    {{#if show_cart_action}}
                    {{!--
                        {{#if has_options}}
                            <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="addCart_btn 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="addCart_btn button button--primary">{{lang 'products.pre_order'}}</a>
                        {{/if}}
                        {{#if add_to_cart_url }}
                            <a href="{{add_to_cart_url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="addCart_btn button button--primary">{{lang 'products.add_to_cart'}}</a>
                        {{/if}}
                        {{#if out_of_stock_message }}
                            <a href="{{url}}" data-event-type="product-click" class="addCart_btn button button--small" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                        {{/if}}
                    --}}
                        {{#if stock_level '==' 0}}
                            <a class="addCart_btn button button--primary" href="{{url}}">{{uppercase 'View Product'}}</a>
                        {{else}}
                            {{#if price.without_tax.value '>' 0}}
                            <span class="addCart_btn button button--primary add_to_cart" data-id="{{id}}" data-action="add">{{uppercase 'Add to Cart'}}</span>
                            {{else}}
                            <a class="addCart_btn button button--primary" href="{{url}}" data-id="{{id}}" data-action="view">{{uppercase 'View Product'}}</a>
                            {{/if}}
                        {{/if}}
                    {{/if}}
                {{else}}
                    {{> components/common/login-for-pricing}}
                {{/or}}
                {{#if show_compare}}
                    <label class="button button--small compare-btn" for="compare-{{id}}">
                        <i class="iconfont iconxiangxi" title="{{lang "products.compare"}}"></i> <input type="checkbox" name="products[]" value="{{id}}" id="compare-{{id}}" data-compare-id="{{id}}">
                    </label>
                {{/if}}
            </div>
        </div>
    </div>
</article>