{include file="$tpl_dir./product-list.tpl"}

$this->context->controller->addCSS($this->_path.'productscategory.css', 'all');
    $this->context->controller->addJS($this->_path.'productscategory.js');

{if count($categoryProducts) > 5}<a id="productscategory_scroll_left" title="{l s='Previous' mod='productscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Previous' mod='productscategory'}</a>{/if}

{if count($categoryProducts) > 5}<a id="productscategory_scroll_right" title="{l s='Next' mod='productscategory'}" href="javascript:{ldelim}{rdelim}">{l s='Next' mod='productscategory'}</a>{/if}

<script type="text/javascript">
    $('#productscategory_list').trigger('goto', [{$middlePosition}-3]);
</script>

<!-- Products list -->
    <ul id="product_list" class="clear">
    {foreach from=$categoryProducts item='categoryProduct' name=categoryProduct}
        <li class="dropshadowclass ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
            <div class="center_block">
                <a href="{$categoryProduct.link_rewrite|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$categoryProduct.name|escape:'htmlall':'UTF-8'}">
               <img src="{$link->getImageLink($categoryProduct.link_rewrite, $categoryProduct.id_image, 'medium_default')}" alt="{$categoryProduct.name|htmlspecialchars}" /></a>

                </a>
                    <h3><a href="{$categoryProduct.link_rewrite|escape:'htmlall':'UTF-8'}" title="{$categoryProduct.name|escape:'htmlall':'UTF-8'}">{$categoryProduct.name|truncate:35:'...'|escape:'htmlall':'UTF-8'}</a></h3>            
            </div>

        </li>
    {/foreach}
    </ul>

#product_list .poverlay {
top:0px;
left:0px;
position:absolute;
display:block;
width:100%;
height:100%;
visibility:hidden;
z-index:2;
background:rgba(0,0,0,0.7);
}

#product_list .cartbutton {
margin-left:10px;
margin-top:90px;
display:inline-block!important;
}

#product_list .dropshadowclass {
border:solid 1px #EFEFEF;
}

#product_list .dropshadowclass:hover {
border:solid 1px #CCC;
-moz-box-shadow:0px 0px 3px #999;
-webkit-box-shadow:0px 0px 3px #999;
box-shadow:0px 0px 3px #999;
}

ul#product_list {
list-style-type:none
}

#product_list li {
text-align:center;
margin-bottom:14px;
border:1px solid #eee;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
padding:10px;
width:144px;
display:inline-block;
vertical-align:top;
margin:2px;
position:relative;
}

#product_list li a {
color:#374853;
text-decoration:none;
}

#product_list li .left_block {
/*float:left;
        /*padding-top:58px;*/
/*width:15px;*/
clear:both;
}

#product_list li p.compare {
position:absolute;
color:#FFF;
width:100%;
background:rgba(0,0,0,0.5);
display:block;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}

#product_list li .viewbutton {
position:absolute;
display:block;
width:100%;
padding-top:10px;
padding-bottom:10px;
background:rgba(0,0,0,0.5);
bottom:0px;
left:0px;
}

#product_list li .left_block .compare label {
display:none;
}

#product_list li p.compare input {
vertical-align:text-bottom
}

#product_list li .center_block {
text-align:center;
}

#product_list li .center_block .product_desc {
display:none;
clear:both;
}

#product_list li .center_block h3 {
font-size:16px;
padding-top:10px;
margin-top:10px;
display:block;
width:100%;
clear:both;
text-align:center;
}

#product_list a.product_img_link {
overflow:hidden;
position:relative;
display:block;
border:1px solid #ccc;
text-align:center;
margin:auto;
}

#product_list a.product_img_link img {
vertical-align:bottom;
}

#product_list li span.new {
display:block;
position:absolute;
top:15px;
right:-30px;
padding:1px 4px;
width:101px;
font-size:10px;
color:#fff;
text-align:center;
text-transform:uppercase;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
background-color:#990000;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* Newer browsers */
}

.ie8 #product_list li span.new {
top:111px;
right:0;
width:94%
}

.ie7 #product_list li span.new {
top:111px;
right:0;
width:94%
}

#product_list li h3 {
padding:0 0 10px 0;
font-size:13px;
color:#000
}

#product_list li a {
color:#000;
text-decoration:none;
}

#product_list li p.product_desc {
overflow:hidden;
padding:0;
line-height:16px;
}

#product_list li p.product_desc,#product_list li p.product_desc a {
color:#666;
}

#product_list li .right_block {
display:block;
clear:both;
}

#product_list li .discount,ul#product_list li .online_only {
display:block;
font-weight:bold;
color:#990000;
text-transform:uppercase
}

#product_list li .discount,ul#product_list li .on_sale {
position:absolute;
bottom:0;
right:0;
display:inline-block;
font-weight:bold;
padding:1px 5px;
font-size:10px;
color:#fff;
text-transform:uppercase;
background:none repeat scroll 0 0 #9B0000
}

#product_list li .online_only {
margin:0 0 10px 0
}

#product_list li .content_price {
position:relative;
}

#product_list li .price {
display:block;
margin-bottom:15px;
font-weight:bold;
font-size:18px;
color:#990000
}

#product_list li span.availability {
color:#488C40
}

#product_list li .ajax_add_to_cart_button {
padding-left:20px
}

#product_list li .ajax_add_to_cart_button span {
display:block;
position:absolute;
top:-1px;
left:-12px;
height:26px;
width:26px;
background:url(../img/icon/pict_add_cart.png) no-repeat 0 0 transparent
}

#product_list li .lnk_view {
display:block;
margin-top:15px;
padding:0 10px;
border:none;
font-weight:bold;
color:#0088CC;
background:url(../img/arrow_right_1.png) no-repeat 100% 4px transparent
}

#product_list li .lnk_view:hover {
text-decoration:underline
}

$categoryProducts = $category->getProducts($this->context->language->id, 1, 100);