<article class="article-book d-flex flex-column h-100 bg-white">
    <figure class="mb-0">
        <a href="<?php the_permalink(); ?>" class="d-block">
            <?php if (has_post_thumbnail()): ?>
                <?php the_post_thumbnail('full', ['class' => 'w-100 d-block', 'alt' => get_the_title()]); ?>
            <?php else: ?>
                <img src="<?php echo KAVEH_TEMPLATE_URI; ?>/assets/images/new-elements/article-02.png" alt="<?php
$title = get_the_title();
if ( wp_is_mobile() ) {
    echo wp_trim_words( $title, 5, '...' );
} else {
    echo wp_trim_words( $title, 8, '...' );
}
?>" width="353" height="242" class="w-100 d-block">
            <?php endif; ?>
        </a>
    </figure>
    
    <?php 
    $categories = get_the_category();
    if (!empty($categories)): ?>
        <a href="<?php echo esc_url(get_category_link($categories[0]->term_id)); ?>" class="category d-inline-block">
            <?php echo esc_html($categories[0]->name); ?>
        </a>
    <?php endif; ?>
    
    <h2 class="title">
        <a href="<?php the_permalink(); ?>"><?php
$title = get_the_title();
if ( wp_is_mobile() ) {
    echo wp_trim_words( $title, 5, '...' );
} else {
    echo wp_trim_words( $title, 8, '...' );
}
?></a>
    </h2>
    
    <div class="mt-auto mb-3 overflow-hidden">
        <?php 
        if (has_excerpt()) {
            the_excerpt();
        } else {
            echo wp_trim_words(get_the_content(), 30, '...');
        }
        ?>
    </div>
    
    <div class="d-flex align-items-center justify-content-between gap-2">
        <div class="author text-truncate d-flex align-items-center gap-2 gap-xl-3">
            <?php echo get_avatar(get_the_author_meta('ID'), 38, '', '', ['class' => 'rounded-circle flex-fill flex-grow-0 flex-shrink-0']); ?>
            <div class="text-truncate">
                <a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?>" class="name text-truncate">
                    <?php the_author(); ?>
                </a>
                <div class="sub-name text-truncate"><?php esc_html_e('Author', 'kavehTheme'); ?></div>
            </div>
        </div>
        
        <div class="d-flex flex-column align-items-end flex-fill flex-grow-0 flex-shrink-0">
            <div class="date d-flex align-items-center justify-content-end gap-2">
                <?php echo get_the_date('j F y'); ?>
                <i class="iconly iconly-Calendar lh-1"></i>
            </div>
            <a href="<?php the_permalink(); ?>" class="btn-view d-none d-md-flex align-items-center justify-content-center">
                <?php esc_html_e('Read More', 'kavehTheme'); ?>
                <i class="isax isax-arrow-left4 lh-1"></i>
            </a>
        </div>
    </div>
</article>