<?php

use Tangibledesign\Framework\Models\BlogPost;

/*  @var BlogPost $mhCurrentPost */
global $mhCurrentPost, $mhCurrentWidget;

$mhImageSizeKey = 'myhome_750_500'; // use closest existing size (3:2), display as 16:9 via CSS

$mhShowCategories = true;
$mhShowReadMore = true;

if (isset($mhCurrentWidget) && is_object($mhCurrentWidget)) {
    if (method_exists($mhCurrentWidget, 'showCategories')) {
        $mhShowCategories = (bool)$mhCurrentWidget->showCategories();
    }

    if (method_exists($mhCurrentWidget, 'showReadMoreButton')) {
        $mhShowReadMore = (bool)$mhCurrentWidget->showReadMoreButton();
    }
}
?>
<a
        class="myhome-blog-post-card-v5"
        href="<?php echo esc_url($mhCurrentPost->getUrl()); ?>"
>
    <div class="myhome-blog-post-card-v5__image">
        <?php
        $mhImage = $mhCurrentPost->getImage();
        if ($mhImage) :
            $mhImageSrcset = $mhImage->getSrcset($mhImageSizeKey);
            ?>
            <img
                    class="lazyload"
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII="
                    alt="<?php echo esc_attr($mhCurrentPost->getName()); ?>"
                <?php if (!empty($mhImageSrcset)) : ?>
                    data-srcset="<?php echo esc_attr($mhImageSrcset); ?>"
                    data-sizes="auto"
                <?php else : ?>
                    data-src="<?php echo esc_url($mhCurrentPost->getImageUrl($mhImageSizeKey)); ?>"
                <?php endif; ?>
            >
        <?php else : ?>
            <img
                    class="lazyload"
                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII="
                    alt="<?php echo esc_attr($mhCurrentPost->getName()); ?>"
            >
        <?php endif; ?>

        <?php // category labels on image removed in favor of subtle inline categories above meta ?>
    </div>

    <div class="myhome-blog-post-card-v5__content">
        <?php if ($mhShowCategories && $mhCurrentPost->hasCategories()) : ?>
            <div class="myhome-blog-post-card-v5__categories myhome-blog-post-card-categories-selector">
                <?php foreach ($mhCurrentPost->getCategories() as $mhCategory) : ?>
                    <span class="myhome-blog-post-card-v5__category">
                        <?php echo esc_html($mhCategory->getName()); ?>
                    </span>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <h3 class="myhome-blog-post-card-v5__heading myhome-blog-post-card-heading-selector">
            <?php echo esc_html($mhCurrentPost->getName()); ?>
        </h3>

        <?php if (!tdf_app('blog_card_hide_user') || !tdf_app('blog_card_hide_publish_date')) : ?>
            <div class="myhome-blog-post-card-v5__meta">
                <?php if (!tdf_app('blog_card_hide_publish_date')) : ?>
                    <div class="myhome-blog-post-card-v5__meta-value">
                        <div class="myhome-blog-post-card-v5__icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                        </div>

                        <?php echo esc_html($mhCurrentPost->getPublishDate()); ?>
                    </div>
                <?php endif; ?>
                <?php
                $mhPostUser = $mhCurrentPost->getUser();
                if ($mhPostUser && !tdf_app('blog_card_hide_user')) :?>
                    <div class="myhome-blog-post-card-v5__meta-value myhome-blog-post-card-meta-selector">
                        <?php if ($mhPostUser->hasImageUrl('myhome_100_100')) : ?>
                            <div class="myhome-blog-post-card-v5__avatar">
                                <img
                                        class="lazyload"
                                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAQAAAA3fa6RAAAADklEQVR42mNkAANGCAUAACMAA2w/AMgAAAAASUVORK5CYII="
                                        data-src="<?php echo esc_url($mhPostUser->getImageUrl('myhome_100_100')); ?>"
                                        alt="<?php echo esc_attr($mhPostUser->getDisplayName()); ?>"
                                >
                            </div>
                        <?php endif; ?>

                        <?php echo esc_html($mhPostUser->getDisplayName()); ?>
                    </div>
                <?php endif; ?>

            </div>
        <?php endif; ?>

        <div class="myhome-blog-post-card-v5__text myhome-blog-post-card-text-selector">
            <?php echo wp_kses_post($mhCurrentPost->getExcerpt()); ?>
        </div>

        <?php if ($mhShowReadMore) : ?>
            <div class="myhome-blog-post-card-v5__read-more">
                <span class="myhome-button myhome-button--secondary myhome-button--regular">
                    <span>
                        <?php echo esc_html(tdf_string('read_more')); ?>
                    </span>
                </span>
            </div>
        <?php endif; ?>
    </div>
</a>
