<?php if($this->getConfig('enabled')): 
	$qty = $this->getConfig('items_show');
?>
<div class="pt_categorytop catlist ">
	<div class="container-inner">
	<div class="row">
		<div class="slide">
			<?php
			$catListTop = $block->getCatListTop();
			$i = 0;
			$rows = 1;
			$last = count($catListTop);
			foreach ($catListTop as $catTop) {
				//echo "<pre>"; print_r($catTop->getData()); echo "</pre>"; 
				$thumb_url = $block -> getThumbUrl($catTop->getThumbPopular());
				?>
				<?php if($i++%$rows==0) { ?> <div class="catgrid"> <?php } ?>
				<?php
				$link = $block->getCategoryLink($catTop);
						echo '<div class="catlist_level_top item">
									<div class="catlist-content">
									
									<div class="cat-images"><a href="'.$link.'">' 
										.'<img src="'.$thumb_url.'" alt="'.$catTop->getName().'" />
									</a></div>
									<div class="top"><h3>'.$catTop->getName().'</h3>';
									$CatList = $block->getCatByPath((int) $catTop->getId(), $catTop->getPath());
									$j = 0;
									echo '<ul>';
										foreach ($CatList as $cat) {
											$link_child = $block->getCategoryLink($cat);
										  if($j >= 5) break;
											echo '<li><a href="'.$link_child.'">'.$cat->getName().'</a></li>';
											$j++;
										}
										echo '<li class="link-category"><a href="'.$link.'">More categories...</a></li>';
									echo '</ul></div>
									</div>
									</div>';
								
				?>
				<?php if($i%$rows==0 || $i == count($catListTop)) { ?> </div> <?php }?>
				<?php
				$j++; 
				if($qty == $i)
					break;
			}
			?>
		</div>
	</div>
	</div>

</div>

<script type="text/javascript">
require([
  "jquery",
  "owlcarousel/minjs"
 ], function($,owlCarousel){
	$(".pt_categorytop .slide").owlCarousel({
	    items : 3,
		autoPlay :true,
		slideSpeed : 500,
		navigation : true,
		stopOnHover : true,
		pagination : false,
		itemsDesktop : [1199,3],
		itemsDesktopSmall : [992,2],
		itemsTablet: [767,2],
		itemsMobile : [479,1]
	});
	
});
 

</script> 
<?php endif; ?>