<?php
/**
 * Title: Popular Articles
 * Slug: blokio/popular-articles
 * Categories: blokio-cards
 * Description: Ordered by comment count as a real, built-in proxy for engagement (no analytics plugin required). For view-count-based popularity instead, pair with a lightweight analytics plugin and swap the Query block's "orderBy".
 * Keywords: popular, trending, most read
 */
?>
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|xl","bottom":"var:preset|spacing|sm"}}}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--xl);padding-bottom:var(--wp--preset--spacing--sm)">

    <!-- wp:heading {"level":2} -->
    <h2><?php echo esc_html__( 'Popular Articles', 'blokio' ); ?></h2>
    <!-- /wp:heading -->

    <!-- wp:query {"query":{"perPage":5,"postType":"post","order":"desc","orderBy":"comment_count","inherit":false},"style":{"spacing":{"margin":{"top":"var:preset|spacing|md"}}}} -->
    <div class="wp-block-query" style="margin-top:var(--wp--preset--spacing--md)">
        <!-- wp:post-template {"layout":{"type":"default"}} -->

            <!-- wp:group {"className":"blokio-card blokio-reveal","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|xs"},"padding":{"top":"var:preset|spacing|xs","right":"var:preset|spacing|sm","bottom":"var:preset|spacing|xs","left":"var:preset|spacing|xs"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
            <div class="wp-block-group blokio-card blokio-reveal" style="margin-bottom:var(--wp--preset--spacing--xs);padding-top:var(--wp--preset--spacing--xs);padding-right:var(--wp--preset--spacing--sm);padding-bottom:var(--wp--preset--spacing--xs);padding-left:var(--wp--preset--spacing--xs)">

                <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
                <div class="wp-block-group">
                    <!-- wp:post-featured-image {"isLink":true,"width":"88px","height":"88px","style":{"border":{"radius":"10px"}}} /-->
                    <!-- wp:group {"layout":{"type":"constrained"}} -->
                    <div class="wp-block-group">
                        <!-- wp:post-terms {"term":"category","className":"blokio-badge","style":{"typography":{"fontSize":"0.7rem"}}} /-->
                        <!-- wp:post-title {"isLink":true,"style":{"typography":{"fontSize":"1.05rem"}}} /-->
                    </div>
                    <!-- /wp:group -->
                </div>
                <!-- /wp:group -->

                <!-- wp:post-comments-count {"textColor":"text-secondary","style":{"typography":{"fontSize":"var(--wp--preset--font-size--small)"}}} /-->

            </div>
            <!-- /wp:group -->

        <!-- /wp:post-template -->
    </div>
    <!-- /wp:query -->

</div>
<!-- /wp:group -->
