<?php $builderHelper = $this->helper('MGS\Fbuilder\Helper\Data'); ?>
<?php $blogHelper = $this->helper('MGS\Blog\Helper\Data'); ?>
<?php $posts = $this->getPostCollection() ?>
<div class="content-block latest-post-grid-block post-gird-masory">
	<?php if (count($posts)>0): ?>
		<?php $blockId = rand() . time(); ?>
		<?php $useSlider = $this->getUseSlider(); ?>
		<?php $items = $perRowDefault = $this->getPerrow(); ?>
		<?php $perRowTablet = $this->getPerrowTablet(); ?>
		<?php $perRowMobile = $this->getPerrowMobile(); ?>
		<?php if($useSlider && $this->hasData('number_row') && $this->getNumberRow()>1): ?>
			<?php $slideMultiRow = true; ?>
			<?php $slideBy = 1 ?>
			<?php $columnCount = $perRowDefault * $this->getNumberRow(); ?>
		<?php else: ?>
			<?php $slideBy = $this->getSlideBy() ?>
			<?php $slideMultiRow = false; ?>
		<?php endif ?>
		
		<?php if($useSlider): ?>
		
		<?php 
			$settingMode = 'multiple'; 
			$navPosition = $this->getNavigationPosition();
	
			$navType = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/navigation');
			if($navType=='image'){
				$nextIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/next_image');
				$prevIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/prev_image');
				$navHtml = '["<span><img src=\''.$builderHelper->getMediaUrl().'mgs/fbuilder/slider/'.$prevIcon.'\'/></span>", "<span><img src=\''.$builderHelper->getMediaUrl().'mgs/fbuilder/slider/'.$nextIcon.'\'/></span>"]';
			}else{
				$nextIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/next_font_class');
				$prevIcon = $builderHelper->getStoreConfig('fbuilder/'.$settingMode.'_slider/prev_font_class');
				$navHtml = '["<span><em class=\''.$prevIcon.'\'></em></span>", "<span><em class=\''.$nextIcon.'\'></em></span>"]';
			}
		?>
		<?php endif ?>
		<div class="block widget mgs-post">
			<div id="post-<?= $blockId; ?>" class="items<?php if($useSlider): ?> owl-carousel mgs-owl-carousel mgs-carousel-<?= $settingMode ?> nav-type-<?= $navType ?> nav-position-<?= $navPosition ?> <?php if($this->getHideNav() && ((($items==1) && ($navPosition!='middle-outside')) || (($items>1) && ($navPosition=='middle-inside')))): ?> autohide-nav<?php endif ?> dot-position-<?= $this->getPaginationPosition()?><?php else: ?> line row-<?= $perRowDefault ?> row-tablet-<?= $perRowTablet ?> row-mobile-<?= $perRowMobile ?><?php endif ?>">
				<?php $i=0; $j=0; foreach ($posts as $_post): $i++; ?>
					
					<?php if($slideMultiRow): ?>
						<?php if ($j++ % $columnCount == 0): ?>
						<div class="line">
						<?php endif ?>
					<?php endif ?>
						<div class="post-item <?php if($slideMultiRow || !$this->hasData('number_row')): ?>col<?php endif ?>">
							<?php if ($i%2 != 0): ?>
							<div class="post-item-detail">
								<div class="post-content">
									<?php if(!$this->getHideCreate()): ?>
										<div class="post-create-name">
											<?= __('<span class="color-theme">%1</span>', $_post->getUser()) ?>
										</div>
									<?php endif ?>
									<h4 class="title-blog">
										<a href="<?= $_post->getPostUrlWithNoCategory(); ?>" title="<?= strip_tags($_post->getTitle()); ?>"><?= $_post->getTitle() ?></a>
									</h4>
									<?php if(!$this->getHideDescription()): ?>
										<div class="short-content">
											<?php echo $_post->getShortContent(); ?>
										</div>
									<?php endif ?>
									<div class="read-more">
										<a class="action default" href="<?= $_post->getPostUrlWithNoCategory();?>"><?= __('Read more') ?></a>
									</div>
								</div>
							</div>
							<?php endif ?>
							<?php if(!$this->getHideThumbnail()): ?>
								<?php
									$themeSettingConfig = $this->helper('MGS\ThemeSettings\Helper\Config');
									$lazyLoad = $themeSettingConfig->getStoreConfig('themesettings/general/lazy_load');
								?>
								<?php if($blogHelper->getImageThumbnailPost($_post) != ""): ?>
									<div class="thumbnail-post">
										<?php if($_post->getThumbType() == "video" && $_post->getVideoThumbId() != ""): ?>
											<?php if($lazyLoad): ?>
												<a class="parent_lazy post-thumbnail--image popup-video" href="<?= $blogHelper->getVideoThumbUrl($_post); ?>" title="<?= strip_tags($_post->getTitle()) ?>" style="background-image:url('<?= $_post->getThumbnailUrl();?>');">
													<img class="lazy" src="<?= $themeSettingConfig->getImageLazyLoad() ?>" data-src="<?= $_post->getThumbnailUrl() ?>" alt="<?= strip_tags($_post->getTitle()) ?>"/>
												</a>
												<div class="blog-list-video">
													<?php if($_post->getThumbType() == "video" && $_post->getVideoThumbId() != ""): ?>
														<a class="btn btn-primary popup-video" href="<?= $blogHelper->getVideoThumbUrl($_post); ?>"></a>
													<?php endif ?>
												</div>	
											<?php else: ?>
												<a href="<?= $_post->getPostUrlWithNoCategory(); ?>" title="<?= strip_tags($_post->getTitle()) ?>" style="background-image:url('<?= $_post->getThumbnailUrl();?>');">
													<img src="<?= $_post->getThumbnailUrl() ?>" alt="<?= strip_tags($_post->getTitle()) ?>"/>
												</a>
												<div class="blog-list-video">
													<?php if($_post->getThumbType() == "video" && $_post->getVideoThumbId() != ""): ?>
														<a class="btn btn-primary popup-video" href="<?= $blogHelper->getVideoThumbUrl($_post); ?>"></a>
													<?php endif ?>
												</div>	
											<?php endif ?>
											<?php else: ?>
											<a class="parent_lazy post-thumbnail--image" href="<?= $_post->getPostUrlWithNoCategory(); ?>" title="<?= strip_tags($_post->getTitle()) ?>" style="background-image:url('<?= $_post->getThumbnailUrl();?>');">
												<img class="lazy" src="<?= $themeSettingConfig->getImageLazyLoad() ?>" data-src="<?= $_post->getThumbnailUrl() ?>" alt="<?= strip_tags($_post->getTitle()) ?>"/>
											</a>
										<?php endif ?>
										<?php if(!$this->getHideCreate()): ?>
											<div class="post-create-date">
												<?= __('<span>%1</span></br><span class="date"> %2</span>', date('d', strtotime($_post->getCreatedAt())), date('M', strtotime($_post->getCreatedAt()))) ?>
											</div>
										<?php endif ?>
									</div>
								<?php endif ?>	
							<?php endif ?>
							<?php if ($i % 2 == 0): ?>
							<div class="post-item-detail post-detail-bottom ">
								<div class="post-content">
									<?php if(!$this->getHideCreate()): ?>
										<div class="post-create-name">
											<?= __('<span class="color-theme">%1</span>', $_post->getUser()) ?>
										</div>
									<?php endif ?>
									<h4 class="title-blog">
										<a href="<?= $_post->getPostUrlWithNoCategory(); ?>" title="<?= strip_tags($_post->getTitle()); ?>"><?= $_post->getTitle() ?></a>
									</h4>
									<?php if(!$this->getHideDescription()): ?>
										<div class="short-content">
											<?php echo $_post->getShortContent(); ?>
										</div>
									<?php endif ?>
									<div class="read-more">
										<a class="action default" href="<?= $_post->getPostUrlWithNoCategory();?>"><?= __('Read more') ?></a>
									</div>
								</div>
							</div>
							<?php endif ?>
						</div>
							
					<?php if($slideMultiRow): ?>
						<?php if ($j % $columnCount == 0 || $j == count($posts)): ?>
						</div>
						<?php endif ?>
					<?php endif ?>
					
				<?php endforeach; ?>
			</div>
		</div>
		<?php if($useSlider): ?>
			<?php $autoPlay = $this->getAutoplay() ? 'true' : 'false'; ?>
			<?php $stopAuto = $this->getStopAuto() ? 'true' : 'false'; ?>
			<?php $nav = $this->getNavigation() ? 'true' : 'false'; ?>
			<?php $dot = $this->getPagination() ? 'true' : 'false'; ?>
			<?php $rtl = $this->getRtl() ? 'true' : 'false'; ?>
			<?php $loop = $this->getLoop() ? 'true' : 'false'; ?>
			<?php $slideBy = $slideBy ? $slideBy : 1; ?>
			
			<script type="text/javascript">
				require([
					'jquery',
					'mgsowlcarousel'
				], function ($) {
					var owlpost<?= $blockId ?> = $('#post-<?= $blockId; ?>').owlCarousel({
						<?php if($slideMultiRow): ?>
							items: 1,
						<?php else: ?>
							items: <?= $perRowDefault; ?>,
						<?php endif ?>
						autoplay: <?= $autoPlay ?>,
						autoplayHoverPause: <?= $stopAuto ?>,
						nav: <?= $nav ?>,
						dots: <?= $dot ?>,
						slideBy: <?= $slideBy ?>,
						rtl: <?= $rtl; ?>,
						loop: <?= $loop; ?>,
						<?php if(!$slideMultiRow):?>margin: <?= $this->getSlideMargin() ?>,<?php endif ?>
						<?php if($navPosition=='top-left' || $navPosition=='top-right'): ?>
							onInitialized: function(){
								$("#post-<?= $blockId; ?> .owl-nav").attr('style', 'top:<?= $this->getNavTop() ?>px');
							},
						<?php endif ?>
						<?php if(!$slideMultiRow): ?>
						responsive:{
							0:{
								items:<?= $perRowMobile; ?>,
								nav: false,
							},
							571:{
								items:<?= $perRowTablet; ?>
							},
							1200:{
								items:<?= $perRowDefault; ?>
							}
						},
						<?php endif ?>
						navText: <?= $navHtml ?>,
						autoHeight:true
					});
				});
			</script>
		<?php endif ?>
	<?php else: ?>
		<div class="message info empty"><div><?= /* @escapeNotVerified */ __('We can\'t find post matching the selection.') ?></div></div>
	<?php endif ?>
</div>