<?php
/**
 * Mageplaza
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Mageplaza.com license that is
 * available through the world-wide-web at this URL:
 * https://www.mageplaza.com/LICENSE.txt
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade this extension to newer
 * version in the future.
 *
 * @category    Mageplaza
 * @package     Mageplaza_Blog
 * @copyright   Copyright (c) Mageplaza (https://www.mageplaza.com/)
 * @license     https://www.mageplaza.com/LICENSE.txt
 */
use Mageplaza\Blog\Block\Post\RelatedPost;
use Mageplaza\Blog\Model\ResourceModel\Post\Collection;
use Magento\Framework\Escaper;

/** @var Collection $posts */
/** @var RelatedPost $block */
/** @var Escaper $escaper */
$posts = $block->getRelatedPostList();
if ($posts && $block->isEnabledBlog()) : ?>
    <h2 class="mb-4 text-2xl lg:text-3xl font-bold mt-4"><?= $posts->getSize() ? $escaper->escapeHtml(__('Related Posts')) : $escaper->escapeHtml(__('No Related Posts')) ?></h2>
    <?php if ($block->getRelatedMode()) : ?>
        <div class="w-full">
            <section id="relatedposts-carousel" class="splide" aria-label="Related Posts">
                <div class="splide__track">
                    <ul class="splide__list">
                        <?php foreach ($posts as $post) : ?>
                            <div class="post-list-item" >
                                <div class="post-item-wraper shadow-md ">
                                    <?php if ($post->getImage()) : ?>
                                        <div class="post-image">
                                            <a href="<?= $escaper->escapeUrl($post->getUrl()) ?>">
                                                <img class="img-responsive w-full"
                                                     src="<?= $escaper->escapeUrl($block->resizeImage($post->getImage(), '400x')) ?>"
                                                     alt="<?= $escaper->escapeHtml($post->getName()); ?>"/>
                                            </a>
                                        </div>
                                    <?php endif; ?>
                                    <div class="mp-post-info bg-primary-darker text-white px-4">
                                        <div class="flex justify-between items-center mb-2 date-txt px-4">
                                            <span class="text-white text-xs font-medium">Buying Guide</span>
                                            <span class="text-white text-sm">22 Aug 2024 </span>
                                        </div>
                                    </div>
                                    <div class="flex flex-col gap-1 px-2 py-3 post-info-wraper">
                                        <h2 class="mp-post-title line-clamp-2 h-10" >
                                            <a class="post-link-title text-base font-Inter font-medium" title="<?= $escaper->escapeHtmlAttr($post->getName()) ?>"
                                               href="<?= $escaper->escapeUrl($post->getUrl()) ?>">
                                                <?= $escaper->escapeHtml($post->getName()) ?>
                                            </a>
                                        </h2>

                                        <div class="post-short-description font-normal text-xs text-neutral-700">
                                            <p><?= /** @noEscape */ $post->getShortDescription() ?></p>
                                        </div>
                                        <div class="mp-clearfix"></div>
                                        <div class="mp-post-meta-info mp-alignright">
                                            <div class="actions">
                                                <a class="mp-read-more px-3 py-1 border-2 rounded-full text-xs font-semibold font-inter text-neutral-600" href="<?= $escaper->escapeUrl($post->getUrl()) ?>"
                                                   title="<?= $escaper->escapeHtmlAttr(__('Read More')) ?>">
                                                    <?= $escaper->escapeHtml(__('Read more')) ?>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </section>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                new Splide('#relatedposts-carousel', {
                    perPage: 3,
                    gap: 15,
                    breakpoints: {
                        1028: {
                            perPage: 2
                        }
                    }
                }).mount();
            });
        </script>
        <style>
            .splide__pagination {
                bottom: -0.5em;
            }
            .splide__arrow {
                display: none !important;
            }
            .splide__pagination__page.is-active {
                background: #000000;
            }
        </style>
    <?php else : ?>
        <ul class="list-disc pl-8 text-black">
            <?php foreach ($posts as $post) : ?>
                <li class="mb-2">
                    <a href="<?= $escaper->escapeUrl($post->getUrl()) ?>" class="text-black hover:underline"><?= $escaper->escapeHtml($post->getName()) ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
<?php endif; ?>
