{capture assign="_component_product_thumb"}
    <div class="s-product-section"
         v-bind:class="{ 'is-selected' : product.states.selected, 'is-published' : product.status === '1', 'is-unpublished' : product.status === '0', 'is-hidden' : product.status === '-1' }">
        <div class="s-section-header flexbox full-width space-8" v-bind:data-product-id="product.id">
            <div class="s-checkbox-wrapper">
                <component-checkbox v-model="product.states.selected" v-on:click-input="onClickItem($event, index)"></component-checkbox>
            </div>
            <div class="s-code-wrapper wide">
                <span v-html="product_code"></span>
            </div>
            <div class="s-action-wrapper">
                <span class="s-icon icon size-14" v-if="product.product_from_subcategory" data-tooltip-id="product_from_subcategories"><svg><use xlink:href='{$_sprite_url}#folder-tree'></use></svg></span>
            </div>
        </div>
        <div class="s-section-images" @mouseover="product.states.image_hovered=true" @mouseleave="product.states.image_hovered=false">
            <template v-if="product.photos.length">
                <component-product-slider v-bind:photos="product.photos" v-bind:photo_id="product.image_id"></component-product-slider>
            </template>
            <template v-else>
                <a class="s-name"
                    v-bind:title="product.name"
                    v-bind:href="'{$wa_app_url}' + product_url">
                    <div class="s-photo-empty">
                        <span class="s-icon icon"><svg><use xlink:href='{$_sprite_url}#empty-image-2'></use></svg></span>
                    </div>
                </a>
            </template>
        </div>
        <div class="s-section-body">
            {strip}
                <div class="s-details-wrapper">
                    <div class="s-date" data-tooltip-id="products-list-date">{ { product.create_date_string } }</div>
                    <div class="s-status">{ { product_status } }</div>
                </div>
            {/strip}
            <div class="s-name-wrapper" v-bind:class="[name_class, image_hovered ? 'is-hovered' : '']">
                <a class="s-name"
                   v-bind:title="product.name"
                   v-bind:href="'{$wa_app_url}' + product_url">{ { product.name } }</a>
            </div>
            <div class="s-price-wrapper">
                <span class="s-price" v-html="product_prices"></span>
            </div>
        </div>
        <div class="s-section-badge" v-if="product.badge">
            <div class="s-badge-wrapper" v-html="product.badge"></div>
        </div>
    </div>
{/capture}
{$_components["component-product-thumb"] = $_component_product_thumb|strip}