{$stocks_count = count($stocks)}
<div class="box contentbox wide" id="s-stocks-container">

    <h1>[`In stock now`]</h1>

    <div class="s-stocks-chips-wrapper">
        <ul class="js-s-stocks-chips chips small">
            <li class="rounded{if !$stock_id} accented{/if}">
                <a href="#/stocks/">[`All stocks`]</a>
            </li>
            {foreach $stocks as $stock}
            <li class="rounded{if $stock.id == $stock_id} accented{/if}">
                <a href="#/stocks/{$stock.id}/">{$stock.name|escape}</a>
            </li>
            {/foreach}
            <li class="transparent rounded">
                <a href="?action=settings#/stock"><i class="fas fa-cog"></i> [`Stock settings`]</a>
            </li>
        </ul>
    </div>

    {if !empty($product_stocks)}
        {* After filtred by stock_id *}
        {$current_stock = []}
        {if $stocks_count > 1 && !empty($stock_id)}
            {foreach $stocks as $stock}
                {if $stock.id == $stock_id}
                    {$stocks = [$stock]}
                    {$current_stock = $stock}
                    {break}
                {/if}
            {/foreach}
        {/if}

        <div class="s-table-scrollable-x hide-scrollbar">
            <table id="s-product-stocks" class="s-product-stocks bigdata nowrap">
                <thead>
                    <tr class="header">
                        <th>&nbsp;</th>
                        {if empty($current_stock)}
                            <th>{strip}
                                <a href="#/stocks/{if $sort === 'count' && $order == 'asc'}desc{else}asc{/if}/" class="s-sort-handler bold">
                                    [`All stocks`]
                                    {if $sort === 'count'}
                                    <span class="icon baseline"><i class="fas fa-caret-{if $order == 'desc'}down{else}up{/if}"></i></span>
                                    {/if}
                                </a>
                            {/strip}</th>
                        {/if}
                        {foreach $stocks as $stock}
                            <th>{strip}
                                {$sort_key = 'stock_count_'|cat:$stock.id}
                                <a href="#/stocks/{if empty($stock_id)}stock_count_{$stock.id}_{else}{$stock_id}/{/if}{if $sort == $sort_key && $order == 'asc'}desc{else}asc{/if}">
                                    {$stock.name|escape}
                                    {if $sort == $sort_key}
                                        <span class="icon baseline"><i class="fas fa-caret-{if $order == 'desc'}down{else}up{/if}"></i></span>
                                    {/if}
                                </a>
                            {/strip}</th>
                        {/foreach}
                        {if !empty($current_stock)}
                            <th>[`Total market value`]</th>
                            <th>[`Total purchase costs`]</th>
                        {/if}
                    </tr>
                </thead>
                <tbody>{strip}
                    {if $current_stock}
                        <tr>
                            <td></td>
                            <td><strong>{$current_stock.total_count}</strong></td>
                            <td><strong>{$current_stock.total_market_html}</strong></td>
                            <td><strong>{$current_stock.total_purchase_html}</strong></td>
                        </tr>
                    {else if !empty($stocks)}
                        <tr>
                            <td></td>
                            <td class="nowrap" title="[`Total market value`]"><strong>{$total_all_stocks.count}</strong> <span class="hint">{$total_all_stocks.total_market_html}</span></td>
                            {foreach $stocks as $stock}
                                <td class="nowrap"><strong>{$stock.total_count}</strong> <span class="hint">{$stock.total_market_html}</span></td>
                            {/foreach}
                        </tr>
                    {/if}
                {/strip}</tbody>
            </table>
        </div>
        <div class="lazyloading-wrapper box small gray">
            <div class="lazyloading-progress-string custom-mb-8">{_w('%d product','%d products', $count)}&nbsp;{sprintf(_w('of %d'), $total_count)}</div>
            <a href="javascript:void(0);" class="lazyloading-link" {if $count >= $total_count}style="display:none;"{/if}>[`Show more products`]</a>
            <span class="lazyloading-progress" style="display:none">
                <i class="fas fa-spinner fa-spin text-gray loading"></i> [`Loading`] <span class="lazyloading-chunk">{_w('%d product', '%d products', min($total_count - $count, $count))}...</span>
            </span>
        </div>

    {else}
        <p class="small">[`See the general picture of your overall stock assets by every SKU and stock.`]</p>
        <ol class="small">
            {$stocks_count = count($stocks)}
            <li{if $stocks_count > 0} class="strike"{/if}>{sprintf('[`Add at least one stock in your <a href="%s">store settings</a>.`]', '?action=settings#/stock')}</li>
            <li>{sprintf('[`Save stock quantities for your <a href="%s">products</a>.`]', 'products/')}</li>
        </ol>
    {/if}

    {if !empty($product_stocks)}
        {*
          table of info
          @see 'template-product-stocks' template
        *}
        {literal}
        <script type="text/html" id="template-product-stocks">
            {% var data = o.product_stocks; %}
            {% var is_single_stock = o.is_single_stock; %}
            {% for (var i = 0, sz = data.length; i < sz; i += 1) { %}
                {% var product = data[i], skus = product.skus, stocks = product.stocks; %}
                {% var sku_count = skus.length; %}
                <tr class="s-product" data-id="{%#product.id%}">
                    {% var hash = '{/literal}{shopHelper::getBackendEditorUrl('@s', 'prices')}{literal}'.replace('@s', product.id); %}
                    <td class="s-product-name-col">
                        <div class="flexbox middle">
                            <a href="{%#hash%}">
                                {% if (product.url_crop_small) { %}
                                    <img src="{%#product.url_crop_small%}" srcset="{%#product.url_crop%} 2x">
                                {% } else { %}
                                    <img src="{/literal}{$wa_app_static_url}{literal}img/image-dummy-small.png" class="not-found">
                                {% } %}
                            </a>
                            <a class="s-product-name custom-ml-12" href="{%#hash%}">{%=product.name%}</a>
                        </div>
                    </td>

                    {% if (!is_single_stock) { %}
                    <!-- All stocks -->
                    <td>
                        {% var has_many_skus = skus.length > 1; %}
                        {% if(has_many_skus) { %}
                        <div class="flexbox middle">
                            {% var product_count = product.count; %}
                            <i class="fas fa-home{% if (product_count > 0 || product_count === '') { %} text-green{% } else { %} text-red{% } %} custom-mr-8"></i>
                            <strong>{% if (product_count !== null && product_count !== '') { %}{%#product_count%}{% } else if (product.has_stock_counts) { %}∞{% } else { %}—{% } %}</strong>
                            <span class="hint custom-ml-4" title="[`Total market value`]">{%#product.total_market_value_html%}</span>
                            <button type="button" class="js-toggle-detailed-all-stocks button nobutton circle smaller">
                                <i class="fas fa-caret-down text-gray large"></i>
                            </button>
                        </div>
                        {% } %}

                        <ul class="list {% if (has_many_skus) { %}small {% } %}detailed-all-stocks"{% if (has_many_skus) { %} style="display:none;"{% } %}>
                            {% for (var k = 0, l = skus.length; k < l; k += 1) { %}
                                {% var sku = skus[k]; %}
                                <li>{%#sku.icon%}
                                    {% if (sku_count > 1) { %}
                                        <a href="{%#hash+'edit/focus=price&sku='+sku.id%}">{%=sku.name%}</a>
                                    {% } %}
                                    <strong>{% if (sku.count !== null && sku.count !== '') { %}{%#String(sku.count)%}{% } else { %}∞{% } %}</strong>
                                    <span class="hint" title="[`Total market value`]">{%#sku.total_market_value_html%}</span>
                                </li>
                            {% } %}
                        </ul>
                    </td>
                    {% } %}

                    {% for (var k = 0, l = stocks.length; k < l; k += 1) { %}
                        {% var stock_id = o.stocks[k].id; %}
                        <td class="s-stock-cell" data-stock-id="{%#stock_id%}">
                            {% var stock_skus = stocks[k]; %}

                            {% var has_many_stock_skus = stock_skus.length > 1; %}
                            {% if(has_many_stock_skus) { %}
                            <div class="flexbox middle">
                                {% var stock_skus_count = product.stocks_summary[stock_id].count; %}
                                <i class="fas fa-home{% if (stock_skus_count > 0 || stock_skus_count === '') { %} text-green{% } else { %} text-red{% } %} custom-mr-8"></i>
                                <span>{% if (stock_skus_count !== null && stock_skus_count !== '') { %}{%#String(stock_skus_count)%}{% } else if (product.has_stock_counts) { %}∞{% } else { %}—{% } %}</span>
                                <span class="hint custom-ml-4" title="[`Total market value`]">{%#product.stocks_summary[stock_id].total_market_value_html%}</span>
                                <button type="button" class="js-toggle-detailed-all-stocks button nobutton circle smaller">
                                    <i class="fas fa-caret-down text-gray large"></i>
                                </button>
                            </div>
                            {% } %}

                            <ul class="list {% if (has_many_stock_skus) { %}small {% } %}detailed-by-stocks"{% if (has_many_stock_skus) { %} style="display:none;"{% } %}>
                                {% for (var j = 0, n = stock_skus.length; j < n; j += 1) { %}
                                    {% var sku = stock_skus[j]; %}
                                    {% var sku_id = sku.id; %}
                                    {% var link_stock = '{/literal}{shopHelper::getBackendEditorUrl('@s', 'prices', ['focus' => 'stock', 'sku' => '@r', 'stock' => '@q'])}{literal}'.replace('@s', product.id).replace('@r', sku_id).replace('@q', stock_id); %}
                                    {% if (sku.num_of_stocks > 0) { %}
                                        <li id="s-item-{%#sku_id%}-{%#stock_id%}" class="js-item z-10 {% if (sku.count === null) { %}infinity{% } %}">
                                            <span>{%#sku.icon%}</span>
                                            {% if (sku_count > 1) { %}
                                            <a href="{%#link_stock%}">{%=sku.name%}</a>
                                            {% } %}
                                            <span>{% if (sku.count !== null && sku.count !== '') { %}{%#String(sku.count)%}{% } else { %}∞{% } %}</span>
                                            <span class="hint" title="[`Total market value`]">{% if (sku.total_market_value_html !== null) { %}{%#sku.total_market_value_html%}{% } %}</span>
                                        </li>
                                    {% } else if (!is_single_stock) { %}
                                        <li class="gray">{% if (product.has_stock_counts) { %}∞{% } else { %}&mdash;{% } %}</li>
                                    {% } %}
                                {% } %}
                            </ul>
                        </td>
                    {% } %}

                    {% if (is_single_stock) { %}
                    <td>{%#product.total_market_value_html%}</td>
                    <td>{%#product.total_purchase_value_html%}</td>
                    {% } %}

                </tr>
            {% } %}
        </script>
        {/literal}

        {$_sort = ""}
        {if !empty($sort) && $sort !== "count"}
            {$_sort = $sort}
        {/if}

        <script>
            $.product_stocks.init({
                product_stocks: {json_encode($product_stocks)},
                stocks: {json_encode($stocks)},
                stock_id: {json_encode($stock_id)},
                order: '{$order}',
                lazy_loading: {
                    auto: true,
                    count: {$count},
                    total_count: {$total_count},
                    sort: {$_sort|json_encode}
                }
            });

            $('#s-stocks-container').on('click', '.js-toggle-detailed-all-stocks', function () {
                const $tr = $(this).closest('tr');
                $tr.find('.js-toggle-detailed-all-stocks svg').toggleClass('fa-caret-down fa-caret-up');
                $tr.find('ul.list').slideToggle(300);
            });
        </script>

    {/if}
    </div>