<?php
$helper = $this->helper('MGS\Blog\Helper\Data');
$collection = $block->getCollection();
$postPerRow = $this->getConfig('general_settings/posts_per_row');
?>
<?php if($this->getRequest()->getParam('id')){
	$checkParam = true;
	$id_param = $this->getRequest()->getParam('id');
}else{
	$checkParam = false;
}
$themeSettingConfig = $this->helper('MGS\ThemeSettings\Helper\Config');
$rtl = $themeSettingConfig->getStoreConfig('themesettings/general/rtl_theme') ? 'true' : 'false';
?>
<?php if (!count($collection)): ?>
    <div class="message empty">
        <div><?= __('Have no posts.') ?></div>
    </div>
<?php else: ?>
	<div class="blog-container category-blog-container row-<?= $postPerRow ?>">
	    <div class="blog-grid blog-post-item">
			<div class="line">
				<?php foreach ($collection as $post): ?>
					<div class="item blog-item">
						<div class="post-images">
							<?php if ($helper->getGalleryImage($post)): ?>
								<div class="post-thumbnail gallery-image-carousel owl-carousel">
									<?php foreach($helper->getGalleryImage($post) as $_img): ?>
										<a class="post-thumbnail--image gallery_image" href="<?= $_img; ?>" 
											>
											<img src="<?= $_img; ?>" alt="" class="img-fluid"/>
										</a>
									<?php endforeach ?>
								</div>
								<script type="text/javascript">
									require([
										'jquery',
										'mgsowlcarousel'
										], function($){			
											$(document).ready(function(){
												$(".gallery-image-carousel").owlCarousel({
													items: 10,
													loop: true,
													nav: false,
													dots: false,
													autoplayTimeout: 5000,
													rtl: <?= $rtl ?>,
													autoplay: true,
													autoplayHoverPause: true,
													margin: 0,
													autoHeight:true,
													responsive:{
														0:{
															items: 1
														},
														576:{
															items: 1
														},
														767:{
															items: 1
														},
														992:{
															items: 1						
														}
													}
												});
											});  	
										});		
									
									require([
										'jquery',
										'magnificPopup'
									], function(jQuery){
										(function($) {
											$(document).ready(function() {
												$('.gallery-image-carousel').magnificPopup({
													delegate: '.owl-item:not(.cloned) a',
													type: 'image',
													tLoading: 'Loading image #%curr%...',
													mainClass: 'mfp-img-gallery',
													fixedContentPos: true,
													gallery: {
														enabled: true,
														navigateByImgClick: true,
														preload: [0,1]
													},
													image: {
														tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
														titleSrc: function(item) {
														return item.el.attr('title');
														}
													}
												});
											});
										})(jQuery);
									});
								</script>
								<?php else:?> 
								<?php if($helper->getImageThumbnailPost($post) != ""): ?>
									<div class="post-thumbnail">
										<?php if($post->getThumbType() == "video" && $post->getVideoThumbId() != ""): ?>
											<a class="post-thumbnail--image popup-video" href="<?= $helper->getVideoThumbUrl($post); ?>" 
											 title="<?= $post->getTitle(); ?>">
												<img class="img-fluid" src="<?= $helper->getImageThumbnailPost($post); ?>" alt="<?= $post->getTitle(); ?>"/>
											</a>
											<div class="blog-list-video">
												<?php if($post->getThumbType() == "video" && $post->getVideoThumbId() != ""): ?>
													<a class="popup-video" href="<?= $helper->getVideoThumbUrl($post); ?>"><i class="icon icon-play32"></i></a>
												<?php endif ?>
											</div>	
										<?php else: ?>
												<a class="post-thumbnail--image" href="<?= $post->getPostUrlWithNoCategory(); ?>" title="<?= $post->getTitle(); ?>">
												<img class="img-fluid" src="<?= $helper->getImageThumbnailPost($post); ?>" alt="<?= $post->getTitle(); ?>"/>
											</a>
										<?php endif ?>
									</div>
								<?php endif ?>
							<?php endif ?>
							<div class="post-metas">
								<div class="post-item-inner-top">
									<div class="view-category">
										<div class="meta-category-name">
											<?php $categoryItem = $block->getParentCategory($post->getPostId()); ?>
											<?php if($categoryItem): ?>
												<span class="category-links entry-meta">
													<?php $i=0; foreach ($categoryItem as $category): $i++; ?>
														<?php if($i > 1): ?>
															<span>, </span>
														<?php endif ?>
														<a href="<?= $category->getCategoryUrl(); ?>"><?= $category->getTitle(); ?></a>
													<?php endforeach ?>
												</span>
											<?php endif ?>
										</div>
									</div>
									<a class="link-item" href="<?= $post->getPostUrlWithNoCategory(); ?>" title="<?= $post->getTitle(); ?>"><?= $post->getTitle() ?> </a>	
									<div class="post-item-inner-top__transform">
									    <div class="short-content-post"><?= $post->getShortContent() ?></div>
								    </div>
																	
								</div>
								
								<div class="post-item-inner-bottom">
									<div class="action-read">
										<a href="<?= $post->getPostUrlWithNoCategory(); ?>" class="read-more btn btn-primary btn-md">
											<span>+ Read more</span>
										</a>
									</div>
									<div class="meta-date">
										<div class="date-post">
											<span class="ti-calendar"></span>
											<span class="color-date"><?= $block->formatDate($post->getCreatedAt(), \IntlDateFormatter::MEDIUM, false);?></span>
										</div>
										<div class="count-comment-post">
											<span class="ti-comment"></span>
											<?php if(($post->getCommentCount() < 10) && ($post->getCommentCount() > 0) ): ?>
											    <span class="color-count-comment">0<?= $post->getCommentCount(); ?> comments </span>
											<?php else: ?>
												<span class="color-count-comment"><?= $post->getCommentCount(); ?> comments </span>
											<?php endif; ?>
										</div>
									</div>
								</div>
							</div>	
						</div>	
					</div>		
				<?php endforeach; ?>
			</div>
	    </div>
	</div>
	<div class="bottom-pagination">
		<div class="toolbar"><?php echo $block->getPagerHtml(); ?></div>
	</div>
<?php endif; ?>
<script type="text/javascript">
	require([
		'jquery',
		'magnificPopup'
	], function(jQuery){
		(function($) {
			$(document).ready(function() {
				$('.popup-video').magnificPopup({
					disableOn: 700,
					type: 'iframe',
					mainClass: 'mfp-img-gallery',
					removalDelay: 160,
					preloader: false,
					fixedContentPos: false
				});
			});
		})(jQuery);
	});
</script>

