<?php

use Magefan\Blog\Block\Post\PostList;
use Magento\Framework\Escaper;

/** @var Escaper $escaper */
/** @var PostList $block */

$_postCollection = $block->getPostCollection()->setPageSize(3);
?>

<?php if (!$_postCollection->count()): ?>
    <div class="message info empty">
        <div>
            <?= $escaper->escapeHtml(__('We can\'t find posts matching the selection.')) ?>
        </div>
    </div>
<?php else: ?>
    <div class="latest-posts-block py-16 bg-secondary-lighter">
        <div class="container">
            <div class="mx-auto grid gap-x-2 gap-y-4 grid-cols-1 md:grid-cols-4 lg:gap-x-6 lg:gap-y-9">
                <div class="px-8 py-16 md:p-4 lg:p-8 bg-[#C60E42]">
                    <div class="md:relative md:h-full">
                        <div class="md:absolute md:top-1/2 md:-translate-y-2/4">
                            <p class="text-2xl md:text-base xl:text-2xl text-white mb-4">
                                <?= $escaper->escapeHtml(__('Check out our latest blog posts, providing you with industry insights, product news and much more...')) ?>
                            </p>
                            <a href="<?= $escaper->escapeUrl('blog') ?>" class="primary bg-white w-full p-2 uppercase font-bold block text-center md:text-base md:py-1 lg:p-2">
                                <span><?= $escaper->escapeHtml(__('View Blog')) ?></span>
                            </a>
                        </div>
                    </div>
                </div>
                <?php foreach ($_postCollection as $_post): ?>
                    <div class="card flex flex-col w-full p-4">
                        <?php if ($featuredImage = $_post->getFeaturedImage()) { ?>
                            <?php
                            $featuredImgAlt = $_post->getData('featured_img_alt');
                            if (!$featuredImgAlt) {
                                $featuredImgAlt = $_post->getData('title');
                            }
                            ?>
                            <div class="product photo product-item-photo block mx-auto mb-3 ">
                                <img class="object-contain hover:shadow-sm" src="<?= $block->escapeUrl($featuredImage) ?>" loading="lazy"
                                     alt="<?= $block->escapeHtml($featuredImgAlt) ?>" width="448" height="336"/>
                            </div>
                        <?php } ?>
                        <p class="text-base font-semibold mb-4"><?php echo $_post->getData('title'); ?></p>
                        <div class="h-24 overflow-hidden mb-4">
                            <?= $_post->getData('content'); ?>
                        </div>
                        <div class="mb-4">
                            <a href="<?= $escaper->escapeUrl($_post->getPostUrl()) ?>" class="text-base font-semibold">
                                <span class="border-b-2 border-black p-0.5">
                                    <?= $escaper->escapeHtml(__('Read Article')) ?>
                                </span>
                            </a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
<?php endif; ?>
