<?php
/**
 * Copyright © Magefan (support@magefan.com). All rights reserved.
 * Please visit Magefan.com for license details (https://magefan.com/end-user-license-agreement).
 *
 * Glory to Ukraine! Glory to the heroes!
 */
?>
<?php
/**
 * Blog sidebar recent posts template
 *
 * @var $block \Magefan\Blog\Block\Sidebar\Recent
 */
?>

<?php
    $_postCollection = $block->getPostCollection();
    $id = rand(10000, 20000);
?>
<?php if ($_postCollection->count()) { ?>

<div class="latest-blog" style="margin-top: 20px; margin-bottom: 5px; background: none;">
   <div class="container" >
      <h2 class="filterproduct-title"
          style="margin-top: 40px; padding-bottom: 5px;">
          <span class="content">
              <strong><?= $block->escapeHtml($block->getTitle()) ?></strong>
          </span>
          <span class="title_line"></span>
      </h2>
      <div id="latest_news" class="owl-top-narrow">
         <div class="recent-posts recent-posts-<?= (int)$id ?>">
            <div class="owl-carousel">
               <?php foreach ($_postCollection as $_post) { ?>
                    <?php
                        $postDate = $_post->getData("publish_time");
                        $_postUrl = $_post->getPostUrl();
                        $_postName = $block->escapeHtml($_post->getTitle());
                        $featuredImgAlt = $_post->getData('featured_list_img_alt') ?: $_post->getData('featured_img_alt');
                    if (!$featuredImgAlt) {
                        $featuredImgAlt = $_postName;
                    }
                    ?>
               <div class="item">
                  <div class="recent-inner">
                     <div class="row">
                        <div class="col-sm-5">
                           <div class="post-image">
                              <?php if ($post_image = $_post->getFeaturedImage()) { ?>
                                <img src="<?= $block->escapeUrl($post_image); ?>" alt="<?= $block->escapeHtml($featuredImgAlt) ?>" />
                                <?php } ?>
                              <div class="post-date">
                                <span class="day"><?= $block->escapeHtml(date("j", strtotime($postDate))); ?></span>
                                <span class="month"><?= $block->escapeHtml(date("M", strtotime($postDate))); ?></span>
                              </div>
                           </div>
                        </div>
                        <div class="col-sm-7">
                           <div class="postTitle">
                              <h2>
                                  <a href="<?= $block->escapeUrl($_post->getPostUrl()) ?>">
                                      <?= $block->escapeHtml($_post->getTitle()) ?>
                                  </a>
                              </h2>
                           </div>
                           <div class="postContent">
                              <p><?= /*@noEscape*/ $_post->getShortFilteredContent() ?></p>
                           </div>
                           <a class="readmore"
                              href="<?= $block->escapeUrl($_post->getPostUrl()) ?>">
                               <?= $block->escapeHtml(__("Read more >"));?>
                           </a>
                        </div>
                     </div>
                  </div>
               </div>
                <?php } ?>
            </div>
         </div>
         <script>
            require([
              'jquery',
              'owl.carousel/owl.carousel.min'
            ], function ($) {
              $(".recent-posts-<?= (int)$id ?> .owl-carousel").owlCarousel({
                loop: false,
                margin: 20,
                nav: false,
                dots: false,
                responsive: {
                  0: {
                    items:1
                  },
                  640: {
                    items:2
                  },
                  768: {
                    items:2
                  },
                  992: {
                    items:2
                  },
                  1200: {
                    items:2
                  }
                }
              });
            });
         </script>
      </div>
   </div>
</div>
<?php } ?>
