<article class="article-bed d-flex flex-column h-100">
  <figure>
    <a href="<?php the_permalink(); ?>" class="d-block overflow-hidden">
      <?php if (has_post_thumbnail()): ?>
        <?php the_post_thumbnail('full', ['class' => 'd-block w-100', 'alt' => get_the_title()]); ?>
      <?php else: ?>
        <img src="<?php echo KAVEH_TEMPLATE_URI; ?>/assets/images/new-elements/article-01.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="260" height="150" class="d-block w-100">
      <?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-article">
    <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="d-flex align-items-center justify-content-between gap-2 mt-auto">
    <div class="author d-flex align-items-center text-truncate gap-2">
      <?php echo get_avatar(get_the_author_meta('ID'), 34, '', '', ['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="date-btn d-flex align-items-center flex-fill flex-grow-0 flex-shrink-0">
      <div class="date d-flex align-items-center justify-content-center flex-column">
        <i class="iconly iconly-Calendar lh-1"></i>
        <?php echo get_the_date('j F y'); ?>
      </div>
      <a href="<?php the_permalink(); ?>" class="btn-view d-flex align-items-center justify-content-center">
        <i class="isax isax-arrow-left4 lh-1"></i>
      </a>
    </div>
  </div>
</article>