{if $product_list}
<div class="xtlive-element">
    <div class="row">
        <div class="col-md-12">
            <div class="grid">
                <div class="hover-list-badge">
                    <a href="{xtlivedemolink}"><img src="{$tpl_path}../../images/demo/xtlive-demo.svg" alt=""></a>
                </div>
                {foreach name=listing key=key item=module_data from=$product_list}
                {if $smarty.foreach.listing.iteration <= 10}
                <div class="grid-item">
                    {if !$module_data.products_image || $module_data.products_image == 'product:noimage.gif'}
                    <a href="{$module_data.products_link}" class="vertical-helper image-link no-image">
                        <i class="no-image-icon"></i>
                    </a>
                    {else}
                    <a href="{$module_data.products_link}" class="vertical-helper image-link no-image">
                            {img img=$module_data.products_image type=m_info class="productImageBorder img-responsive" alt=$module_data.products_name|escape:"html"}
                    </a>
                    {/if}
                    <div class="grid-hover-box">
                        <p class="h4">{$module_data.products_name}</p>
                        <div class="clearfix footer-buttons">
                            {if $module_data.allow_add_cart eq 'true'}
                            {form type=form name=product action='dynamic' link_params=getParams method=post}
                            {form type=hidden name=action value=add_product}
                            {form type=hidden name=product value=$module_data.products_id}
                            {form type=hidden name=qty value=1}
                            {/if}
                            <button type="submit" class="btn btn-sm btn-cart" title="{txt key=BUTTON_ADD_CART}" data-toggle="tooltip" data-original-title="{txt key=BUTTON_ADD_CART}">
                                <i class="fa fa-shopping-basket"></i>
                                <span class="sr-only">{txt key=BUTTON_ADD_CART}</span>
                            </button>
                            {if $module_data.allow_add_cart eq 'true'}
                            {form type=formend}
                            {/if}
                        </div>
                    </div>
                </div>
                {/if}
                {/foreach}
            </div>
        </div>
    </div>
</div>

{else}
{* render demo markup *}
<div class="xtlive-element">
    <div class="row">
        <div class="col-md-12">
            <div class="grid">
                {*
                <div class="hover-list-badge">
                    <a href="{xtlivedemolink}"><img src="{$tpl_path}../../images/demo/xtlive-demo.svg" alt=""></a>
                </div>
                *}
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-3.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Contrast Floral A-Line Dress</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-6.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Collard Floral Skater Dress</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-4.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">United Kingdom Flag Handbag</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-xtlive.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">xtlive - Die Ultimative Erweiterung</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-7.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Bow Back Contrast Hat</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-5.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Aviator Sunglasses</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-xtlive-2.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Lerne xtlive kennen</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-1.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Peach Floral Print Shift Dress</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-2.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Black Metallic Contrast Wrap Playsuit</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="grid-item">
                    <a href="{xtlivedemolink}">
                        <img src="{$tpl_path}../../images/demo/hover_demo-8.jpg" class="img-responsive" alt="">
                        <div class="grid-hover-box">
                            <p class="h4">Floral Wide Leg Jumpsuit</p>
                            <div class="clearfix footer-buttons">
                                <a href="{xtlivedemolink}" class="btn btn-sm btn-cart" title="IN DEN WARENKORB" data-toggle="tooltip" data-original-title="IN DEN WARENKORB">
                                    <i class="fa fa-shopping-basket"></i>
                                    <span class="sr-only">IN DEN WARENKORB</span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{/if}
