<li class="{{ class }}">
    
    
    {% set item_image = placeholder_images.item_small.value %}
    {% set item_image_hover = "" %}
    {% set image_alt = item.name %}

    {% if external_image is not empty %}
        {% set item_image = item.image %}
        {% set item_image_hover = "" %}
        {% set image_alt = item.alt %}
    {% endif %}

    {% if item.images is not empty and item.images[item.image_default]['name'] is not empty %}
        {% set item_image = item.images[item.image_default]['name'] %}
        {% set image_alt = item.images[item.image_default]['alt'] %}
    {% endif %}

    {# Set hover image if applicable #}
    {% if item.images is not empty
        and item.images[item.image_hover]['name'] is not empty
        and item.image_default != item.image_hover
        and settings.ITEM_PREVIEW_HOVER_IMAGE == true
    %}
        {% set item_image_hover = item.images[item.image_hover]['name'] %}
    {% endif %}

    {% set item_image = item.getImagePath('small') %}

    {# {{ item.getProductCardData().url }} #}
    <span class="productCard">


        <div class="productImage">

            <picture class="imageWrap {% if (item_image is empty) %} noImage{% endif %}">
                {% if (item_image is not empty) %}
                    <img 
                         src="{{ item_image }}"
                         alt="{{ image_alt ?: item.name }}"
                         width="328"
                         height="328"
                    />
                {% else %}
                    <div class="noImageSvg">
                        {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/icons/picture.svg')|raw }}
                    </div> <!-- .noImageSvg -->
                {% endif %}
            </picture> <!-- .imageWrap -->

        </div> <!-- .productImage -->

        <div class="productContent">
            
            <h2 class="productTitle">
                {{ item.name }}
            </h2>
            
            {#  <h4>{{ item.getMainCategory().name }}</h4> #}

            {#  <h5 class="js-link" data-url="{{ item.getUrlAttribute() }}">More info</h5> #}

        </div> <!-- .productContent -->


        <div class="productCta">

            {#  
            {% include 'shop/item/partials/item_price_small.twig' with {
                use_from_price: true
            }%}
            #}


            <div class="stockWrap">
                
                <stock-badge
                        :has-stock="{{ item.isInStock() | json_encode }}"
                        :small="true"
                ></stock-badge>

            </div> <!-- .noStockWrap -->
            
            
            <span class="button">
                {% if button_text is not empty %}
                    {{ button_text }}
                {% else %}
                    {{ item.getProductCardData(is_upsell|default(false)).label | raw }}
                {% endif %}
            </span>
            
        </div> <!-- .productCta -->
        


        {{ hooks_do_action('item_small_end', item) }}

    </span> <!-- .innerItem -->

</li>
