{config_load file="$language.conf" section="products"}
{literal}
    <style>
        #product_list .ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {
            padding-left: 120px;
        }

        #product_list .ui-li-thumb {
            background-color: #fff;
        }
    </style>
{/literal}
<div id="product_list">
    <ul id="productSearch" data-role="listview" data-filter="true" data-filter-placeholder="{#button_search#}"
        data-filter-theme="d" data-theme="d" data-divider-theme="d" data-inset="true" data-split-icon="gear"
        data-split-theme="d">
        {foreach from=$products item=product}
            <li>
                <img src="{$product.products_image_src}">

                <h3 class="list_header">{$product.products_model} - {$product.products_name} </h3>

                <p>{$product.products_description|strip_tags}</p>

                <p>{#quantity#}: {$product.total_quantity} &middot; {#turnover#}: {$product.turnover} </p>

                <p class="ui-li-aside"> {$product.total_quantity}x <strong>{$product.products_price}</strong>
                    <br/>
                    &Sigma;
                    {$product.turnover}
                    <br/>
                </p>

                {if !$mode_saas}
                    <a href="#popupMenu_{$product.products_id}" data-rel="popup" data- position-to="window"
                       data-transition=""></a>
                {/if}

            </li>
        {/foreach}

    </ul>

</div>


{foreach from=$products item=product}
    <div data-role="popup" id="popupMenu_{$product.products_id}">
        <ul data-role="listview" data-inset="true" style="min-width:210px;">
            <li data-role="divider">{#heading_action#}</li>
            <li><a href="{$product.link_shop}" target="_blank">{#action_open_in_shop#}</a></li>
            <li><a href="{$product.link_admin}" target="_blank">{#action_open_in_admin#}</a></li>
        </ul>
    </div>
{/foreach}


{literal}
    <script type="text/javascript">
        $(document).ready(function () {
            var val = document.URL;
            if (val.indexOf("filterstr") > 0) {
                var url = val.substr(val.indexOf("filterstr"));
                var query = url.replace("filterstr=", "");
                //query is now an ID, do stuff with it...
                if (query.length != 0) {
                    $('#productSearch').prev('form[role="search"]').find('input[data-type="search"]')
                        .val(query)
                        .trigger('change');
                }
            }
        });
    </script>
{/literal}
