{$_cart_url = $wa->getUrl('shop/frontend/order')}

<!-- products thumbnail list view -->

{if $wa->shop->cart->total() > 0}{$add2cart_label = _wd('shop', 'Add to cart')}{else}{$add2cart_label = _wd('shop', 'Buy')}{/if}

{function name="_product_image" p=[]}
    <a href="{$p.frontend_url}" title="{$p.name}" class="wa-mb-8 text-center">
        <div class="image">
            {$wa->shop->productImgHtml($p, $_img_size, ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png", 'srcset' => "`$wa->shop->productImgUrl($p, $_img_size|cat:'@2x')` 2x"])}
        </div>
    </a>
{/function}

<ul class="thumbs product-list row cols2-mobile cols3-tablet gap20">
    {if !empty($theme_settings.list_features)}
        {$features = $wa->shop->features($products)}
    {/if}

    {$_col_width = 12 / $theme_settings.product_in_row}
    {$_img_sizes = ['2' => '970', '3' => '750', '4' => '750']}
    {$_img_size = $_img_sizes[$theme_settings.product_in_row]}

    {$_product_image_slider = $theme_settings.product_image_slider|default:1}
    {if !empty($_product_image_slider)}
        {$_products_ids = array_keys($products)}
        {$_images = $wa->shop->images($_products_ids)}
    {/if}

    {foreach $products as $p}
        {$available = $wa->shop->settings('ignore_stock_count') || $p.count === null || $p.count > 0}

        {if !empty($p.skus) && !empty($p.skus[$p.sku_id])}
            {$sku = $p.skus[$p.sku_id]}
            {if empty($sku.available) && (count($p.skus) === 1)}{$available = false}{/if}
        {/if}

        <li class="wa-flex wa-flex-column col w{$_col_width}" itemscope itemtype ="http://schema.org/Product">
            {$badge_html = $wa->shop->badgeHtml($p.badge)}
            {if $badge_html}
                <div class="badge-wrapper top left">
                    {$badge_html}
                </div>
            {/if}
            {if $_product_image_slider}
                {$_max_images_count = 10}
                {$_images_count = (count($_images[$p.id]|default:[]) > $_max_images_count) ? $_max_images_count : count($_images[$p.id]|default:[])}
                {if $_images_count > 1}
                    {$_item_width = 100 / $_images_count}
                    {$_first_image = reset($_images[$p.id])}
                    <div class="product_image_slider image wa-mb-8" onclick="location.href='{$p.frontend_url}'">
                        {foreach $_images[$p.id] as $_image}
                            {if $_image@iteration > $_max_images_count}
                                {break}
                            {/if}
                            {$_left_offset = $_item_width * $_image@index}
                            <div class="image-item">
                                <span class="image-zone" style="left: {$_left_offset}%; width: {$_item_width}%;" aria-hidden="true"></span>
                                    {$wa->shop->imgHtml($_image, $_img_size, ['itemprop' => 'image', 'class' => 'image-frame', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png", 'srcset' => "`$wa->shop->imgUrl($_image, $_img_size|cat:'@2x')` 2x"])}
                                <div class="slider-indicators">
                                    {for $i = 1 to $_images_count}
                                        <span class="slider-indicator{if $_image@index != $i - 1} inactive{else} active{/if}"></span>
                                    {/for}
                                </div>
                            </div>
                        {/foreach}
                    </div>
                {else}
                    {_product_image p=$p}
                {/if}
            {else}
                {_product_image p=$p}
            {/if}

            <div class="pricing wa-flex wa-flex-wrap space-1 align-items-center wa-mb-16 wa-mt-8">
                <span class="price nowrap">{shop_currency_html($p.price)}</span>
                {if $available && $p.compare_price > 0}
                    <span class="compare-at-price nowrap"> {shop_currency_html($p.compare_price)}</span>
                {/if}
            </div>

            <a href="{$p.frontend_url}" title="{$p.name}">
                <h5 class="{if !$p.summary}wa-mb-4{/if}"><span itemprop="name">{$p.name}</span></h5>
                {if $p.summary}<span itemprop="description" class="summary">{strip_tags($p.summary)|truncate:100}</span>{/if}
            </a>

            {if !empty($p.features)}
                <ul class="features">
                    {foreach $p.features as $f_code => $f_value}
                        <li{if $features[$f_code].type == 'divider'} class="divider"{/if}>
                        <span class="name">
                            {$features[$f_code].name|escape}
                        </span>
                        <span class="value{if $features[$f_code].type == 'color'} is-color{/if}" itemprop="{$f_code|escape}">
                            {if is_array($f_value)}
                                {if $features[$f_code].type == 'color'}
                                    {implode(' ', $f_value)}
                                {else}
                                    {implode(', ', $f_value)}
                                {/if}
                            {else}
                                {$f_value}
                            {/if}
                        </span>
                        </li>
                    {/foreach}
                </ul>
            {/if}
            {if $p.rating > 0}
                <span class="rating nowrap wa-mt-8">{$wa->shop->ratingHtml($p.rating, 16)}</span>
            {/if}
            <div itemprop="offers" class="offers wa-mt-auto wa-pt-20" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="price" content="{shop_currency($p.price, null, null, 0)}">
                <meta itemprop="priceCurrency" content="{$wa->shop->currency()}">
                {if $available}
                    <form class="purchase addtocart" {if $p.sku_count > 1}data-url="{$p.frontend_url}{if strpos($p.frontend_url, '?')}&{else}?{/if}cart=1"{/if} method="post" action="{$wa->getUrl('shop/frontendCart/add')}">
                        <input type="hidden" name="product_id" value="{$p.id}">
                        <div class="wa-flex align-items-center space-025">
                            <div class="wa-flex-fill addtocart-btn-wrapper" style="position: relative;">
                                <button type="submit" class="w-100 addtocart-btn blink">
                                    <span class="wa-hide-m">{$add2cart_label}</span>
                                    <span class="wa-hide wa-show-m">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 576 512" fill="currentColor"><!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"/></svg>
                                    </span>
                                </button>
                                <a href="{$wa->getUrl('shop/frontend/order')}" class="wa-flex-column align-items-center w-100 button gotocart-btn wa-hide">
                                    <span class="">[`Added to cart`]</span>
                                    <span class="smaller">[`View`]</span>
                                </a>
                            </div>
                            {if !empty($theme_settings.compare_products)}
                                <a data-product="{$p.id}" class="compare" href="#" title="[`Compare`]">
                                    <svg class="compare compare-from-list{if $wa->shop->inComparison($p.id)} active{/if}" width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
                                        <use xlink:href="#img-comparison"></use>
                                    </svg>
                                </a>
                            {/if}
                        </div>
                        {if $wa->shop->countPickupLocations() > 0}
                            {$wa->shop->getPickupButton($p)}
                        {/if}
                    </form>
                    <link itemprop="availability" href="http://schema.org/InStock">
                {else}
                    <div class="wa-flex align-items-center space-025">
                        <a href="{$p.frontend_url}" title="{$p.name}" class="w-100 gray button nowrap">
                            <span>
                                {if $wa->shop->settings('ignore_stock_count')}
                                    {_wd('shop', 'Pre-order only')}
                                {else}
                                    {_wd('shop', 'Out of stock')}
                                {/if}
                            </span>
                        </a>
                        {if !empty($theme_settings.compare_products)}
                            <a data-product="{$p.id}" class="compare" href="#" title="[`Compare`]">
                                <svg class="compare compare-from-list{if $wa->shop->inComparison($p.id)} active{/if}" width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
                                    <use xlink:href="#img-comparison"></use>
                                </svg>
                            </a>
                        {/if}
                    </div>
                    <link itemprop="availability" href="http://schema.org/OutOfStock">
                {/if}
            </div>
        </li>
    {/foreach}
</ul>

{if isset($pages_count) && $pages_count > 1}
<div class="block {if $theme_settings.pagination == 'lazyloading'}lazyloading-paging{else}paging-nav{/if}"  data-times="2" data-link-text="[`Load more`]" data-loading-str="[`Loading...`]">
    {wa_pagination total=$pages_count attrs=['class' => "menu-h"]}
</div>
{/if}