<?php
$helper = $this->helper('MGS\Blog\Helper\Data');
$collection = $block->getPostCollection();
$_collectionSize = count($collection);
?>

<div class="content-block blog-block blog-list-blog">
	<?php if($this->getData('mgs_panel_title') != "" || $this->getData('mgs_panel_note') != ""): ?>
		<div class="content-heading">
			<?php if($this->getData('mgs_panel_title')): ?>
				<h3 class="title"><?php echo $helper->decodeHtmlTag($this->getData('mgs_panel_title')) ?></h3>
			<?php endif ?>
			<?php if($this->getData('mgs_panel_note')): ?>
				<div class="block-note"><?php echo $helper->decodeHtmlTag($this->getData('mgs_panel_note')) ?></div>
			<?php endif ?>
		</div>
	<?php endif ?>

	<?php if (count($collection)): ?>
		<?php
			$blockId = rand() . time();
			$showShortContent = $this->getConfig('show_short_content');
			$viewAs = $this->getConfig('view_as');
			$showThumbnail = $this->getConfig('show_thumbnail');
			$perRow = $this->getConfig('items', 5);
		?>
		<?php if ($viewAs == 'owl_carousel'): ?>
			<div class="block widget mgs-blog-lastest-posts lastest-posts-list">
				<div class="block-content row">
					<div class="owl-carousel mgs-carousel-<?php echo $blockId; ?>">
						<?php $i=0; foreach ($collection as $post): ?>
							<?php if ($i++ % $perRow == 0): ?>
								<div class="item">
							<?php endif ?>
								<div class="blog-content list-content <?php if ($showThumbnail): ?>has-image<?php endif ?>">
									<?php if ($showThumbnail): ?>
										<?php if($post->getThumbType() == "video"): ?>
											<?php if($helper->getThumbnailImgVideoPost($post) != ""): ?>
												<div class="video image" data-toggle="modal" data-target="#postModal-footer--<?php echo $post->getId() ?>">
													<img alt="" class="img-fluid" src="<?php echo $helper->getThumbnailImgVideoPost($post); ?>" />
												</div>
											<?php endif ?>
										<?php else: ?>
											<div class="image">
												<a class="post-title-link" title="<?php echo $post->getTitle(); ?>" href="<?php echo $helper->getPostUrl($post); ?>">
													<img src="<?php echo $post->getThumbnailUrl(); ?>" class="img-fluid" alt="<?php echo $post->getTitle(); ?>" />
												</a>
											</div>
										<?php endif ?>
									<?php endif ?>
									<div class="short-detail">
										<div class="title"><a href="<?php echo $post->getPostUrlWithNoCategory(); ?>" title="<?php echo $post->getTitle(); ?>"><?php echo $post->getTitle() ?></a></div>
										<?php if ($showShortContent): ?>
											<div class="short-content">
												<?php echo substr($post->getShortContent(), 0, $this->getConfig('limit_characters_short_content')); ?>
											</div>
										<?php endif ?>
										<?php if ($helper->getConfig('comment_settings/enabled')): ?>
											<div class="comment-link">	
												<i class="fa fa-comment"></i>
												<span>
													<?php echo __('%1 Comment(s)', $post->getCommentCount()) ?>
												</span>
											</div>
										<?php endif; ?>
									</div>
								</div>
							<?php if ($i % $perRow == 0 || $i == $_collectionSize): ?>
								</div>
							<?php endif ?>
						<?php endforeach ?>
					</div>
				</div>
			</div>
			
			<script type="text/javascript">
				require([
					'jquery',
					'mgs/owlcarousel'
				], function ($) {
					$('.mgs-carousel-<?php echo $blockId ?>').owlCarousel({
						items: 1,
						autoplay: <?php echo $this->getConfig('autoplay') ? 'true' : 'false' ?>,
						autoplayHoverPause: <?php echo $this->getConfig('stop_auto') ? 'true' : 'false' ?>,
						nav: <?php echo $this->getConfig('navigation') ? 'true' : 'false' ?>,
						dots: <?php echo $this->getConfig('pagination') ? 'true' : 'false' ?>,
                        rtl: RTL,
						navText: ["<i class='pe-7s-angle-left'></i>","<i class='pe-7s-angle-right'></i>"]
					});
				});
			</script>
		<?php else: ?>
			<div class="block widget lastest-posts-list">
				<div class="block-content">
					<ul>
						<?php foreach ($collection as $post): ?>
							<li class="item">
								<div class="blog-content list-content <?php if ($showThumbnail): ?>has-image<?php endif ?>">
									<?php if ($showThumbnail): ?>
										<?php if($post->getThumbType() == "video"): ?>
											<?php if($helper->getThumbnailImgVideoPost($post) != ""): ?>
												<div class="video image" data-toggle="modal" data-target="#postModal-footer--<?php echo $post->getId() ?>">
													<img alt="" class="img-fluid" src="<?php echo $helper->getThumbnailImgVideoPost($post); ?>" />
												</div>
											<?php endif ?>
										<?php else: ?>
											<div class="image">
												<a class="post-title-link" title="<?php echo $post->getTitle(); ?>" href="<?php echo $helper->getPostUrl($post); ?>">
													<img src="<?php echo $post->getThumbnailUrl(); ?>" class="img-fluid" alt="<?php echo $post->getTitle(); ?>" />
												</a>
											</div>
										<?php endif ?>
									<?php endif ?>
									<div class="short-detail">
										<div class="title"><a href="<?php echo $post->getPostUrlWithNoCategory(); ?>" title="<?php echo $post->getTitle(); ?>"><?php echo $post->getTitle() ?></a></div>
										<?php if ($showShortContent): ?>
											<div class="short-content">
												<?php echo substr($post->getShortContent(), 0, $this->getConfig('limit_characters_short_content')); ?>
											</div>
										<?php endif ?>
										<?php if ($helper->getConfig('comment_settings/enabled')): ?>
											<div class="comment-link">	
												<i class="fa fa-comment"></i>
												<span>
													<?php echo __('%1 Comment(s)', $post->getCommentCount()) ?>
												</span>
											</div>
										<?php endif; ?>
									</div>
								</div>
							</li>
						<?php endforeach ?>
					</ul>
				</div>
			</div>
		<?php endif; ?>
		
		<?php foreach ($collection as $post): ?>
			<?php if ($showThumbnail): ?>
				<?php if($post->getThumbType() == "video"): ?>
					<?php if($helper->getThumbnailImgVideoPost($post) != ""): ?>
						<div id="postModal-footer--<?php echo $post->getId() ?>" class="modal fade" role="dialog">
							<div class="modal-video-dialog modal-dialog modal-lg">
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
									</div>
									<div class="modal-body">
										<?php echo $helper->getThumbnailPost($post); ?>
									</div>
								</div>
							</div>
						</div>
						<script type="text/javascript">
							require([
								'jquery'
							], function ($) {
								$('#postModal-footer--<?php echo $post->getId() ?>').on('hidden.bs.modal', function () {
									var $iframe = $('iframe', $(this)),
									src = $iframe.prop('src');
									$iframe.prop('src', '').prop('src', src.replace('&autoplay=1', ''));
								});
							}); 
						</script>
					<?php endif ?>
				<?php endif; ?>
			<?php endif ?>
		<?php endforeach ?>
	<?php else: ?>
		<div role="alert" class="alert alert-warning"> <?php echo __('There are no posts matching the selection.') ?> </div>
	<?php endif; ?>
</div>
