<?php
$post_id = get_the_ID();
$args = array(
    'posts_per_page' => absint( epcl_get_option('related_posts_limit', 4) ),
    'category__in' => wp_get_post_categories($post_id),
    'post__not_in' => array($post_id),
    'post_type' => 'post',
    'order' => 'DESC',
);
$query_related = new WP_Query( $args );
$epcl_mode = epcl_get_mode();
?>
<?php if( $query_related->have_posts() ): ?>    
    <section class="related section bg-box" id="epcl-related-stories">
        <h3 class="title medium bordered absolute"><?php esc_html_e('Related Articles', 'groovy'); ?></h3>
        <div class="row">
            <?php while( $query_related->have_posts() ): $query_related->the_post(); ?>
                <?php
                $post_id = get_the_ID();
                $post_meta = get_post_meta( $post_id, 'epcl_post', true );
                $size = 'medium';
                $thumb_url = get_the_post_thumbnail_url($post_id, $size);
                $index = $query_related->current_post + 1;
                // Primary category (optional)
                $post_class = epcl_get_primary_category( '', $post_meta, $post_id );
                ?>
                <article <?php echo post_class('item grid-50 tablet-grid-50 mobile-grid-100 epcl-flex'.$post_class); ?>>
                    <?php if( $thumb_url ): ?>
                        <a href="{{url}}" class="thumb epcl-loader shadow-effect">
                            <?php if( epcl_is_amp() ): ?>
                                <amp-img class="cover" layout="fill" src="<?php echo esc_url($thumb_url); ?>"></amp-img>
                            <?php else: ?>
                                <?php if( epcl_get_option('enable_lazyload') == '1' ): ?>
                                    <span class="fullimage cover lazy" data-src="<?php echo esc_url($thumb_url); ?>"></span>
                                <?php else: ?>
                                    <span class="fullimage cover" style="background-image: url(<?php echo esc_url($thumb_url); ?>);"></span>
                                <?php endif; ?>
                            <?php endif; ?>
                            <span class="epcl-number"><?php echo absint($index); ?></span>
                        </a>
                    <?php endif; ?>
                    <div class="info">
                        <h4 class="title small underline-effect"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
                        <div class="meta small">
                            <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time( get_option('date_format') ); ?></time>
                            <?php
                                if( function_exists('epcl_render_reading_time') ){
                                    epcl_render_reading_time();
                                }  
                            ?> 
                        </div>
                    </div>
                </article>
            <?php endwhile; ?>
            <div class="clear"></div>
        </div>
    </section>
    <?php wp_reset_postdata(); ?>
<?php endif; ?>