<?php
$index = absint( get_query_var('index') );

$column_class = 'grid-33';
$grid_posts_column = 3;
$post_class = '';

if( !get_post_format() && !has_post_thumbnail() ){
    $post_class .= ' no-thumb';
}
?>

<article <?php post_class('default index-'.$index.' '.$column_class.$post_class.' tablet-grid-50 mobile-grid-100 np-mobile'); ?>>
    <div class="article-wrapper">

        <header>
            <?php if( has_post_thumbnail() ): ?>
                <div class="post-format-image post-format-wrapper">
                    <div class="featured-image">
                        <a href="<?php the_permalink(); ?>" class="thumb hover-effect">
                            <?php the_post_thumbnail( BREEK_LITE_THEMEPREFIX.'_loop_grid', array( 'class' => 'fullimage cover', 'loading' => 'lazy' ) ); ?>
                        </a>
                        <?php echo breek_lite_render_categories(); ?>
                    </div>
                </div>
            <?php else: ?>
                <?php echo breek_lite_render_categories( 'no-thumb' ); ?>
            <?php endif; ?>

            <?php if( breek_lite_get_option('enable_global_date') !== '0' ): ?>
                <div class="meta">
                    <time datetime="<?php the_time('Y-m-d'); ?>"><i class="remixicon remixicon-calendar-line"></i> <?php the_time( get_option('date_format') ); ?></time>
                    <div class="clear"></div>
                </div>
            <?php endif; ?>

            <h2 class="title main-title gradient-effect"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>        
        </header>

        <div class="post-excerpt">
            <?php if( breek_lite_get_option('grid_display_excerpt') !== '0'): ?>
                <?php the_excerpt(); ?>
            <?php endif; ?>
            <div class="clear"></div>
        </div>  

        <?php
        $author_id = get_the_author_meta('ID');
        $author_avatar = get_avatar_url( get_the_author_meta('email') );
        $author_name = get_the_author();
        $footer_class = '';
        ?>

        <footer class="author-meta">
            <?php if( breek_lite_get_option('grid_display_author') !== '0' ): ?>
                <a href="<?php echo get_author_posts_url($author_id); ?>" class="author" title="<?php echo esc_attr($author_name); ?>">
                    <?php if($author_avatar): ?>
                        <span class="author-image cover" style="background-image: url('<?php echo esc_url($author_avatar); ?>');"></span>
                    <?php endif; ?>
                    <span class="author-name"><?php echo esc_html($author_name); ?></span>
                </a>
            <?php endif; ?>
            <?php if( is_sticky() ): ?>
                <span class="meta-info alignright" title="<?php esc_attr_e('Featured', 'breek-lite'); ?>"><i class="remixicon remixicon-star-line"></i></span>
            <?php endif; ?>
            <?php if( breek_lite_get_option('enable_global_comments') !== '0' ): ?>
                <a href="<?php the_permalink(); ?>#comments" class="comments meta-info alignright" title="<?php esc_attr_e('Go to comments', 'breek-lite'); ?>">         
                    <span class="comment-count"><?php echo get_comments_number($post->ID); ?></span>
                    <i class="remixicon remixicon-chat-1-line fa-flip-horizontal"></i>
                </a>
            <?php endif; ?>
            <div class="clear"></div>
        </footer>
        <div class="border"></div>        
    </div>
</article>

<?php $index++; set_query_var('index', $index); ?>

<?php if($index % $grid_posts_column == 0): ?>
	<div class="clear hide-on-tablet"></div>
<?php endif; ?>

<?php if($index % 2 == 0): ?>
	<div class="clear hide-on-desktop hide-on-mobile"></div>
<?php endif; ?>
