<?php
/*
** Template Name: Blog
*/ 
get_header(); ?>
<!-- Main Content -->
  <main>
<!-- Banner Section -->
    <section class="section position-relative"
      style="background-image: url('<?php echo bloginfo('template_directory'); ?>/image/multiethnic-women-with-tattoo-and-coffee-to-go-hol-2024-11-08-08-18-58-utc.jpg'); height: 40vh;">
      <div class="bg-overlay-secondary"></div>
      <div class="b-container h-100 position-relative pt-4 text-white" style="z-index: 2;">
        <div
          class="col-10 d-flex flex-column w-100 h-100 justify-content-center align-items-center text-center text-white gap-3 font-1">
          <h1 class="display-2 mb-0" style="font-weight: 900;"><?php the_title(); ?></h1>
          <!--<nav aria-label="breadcrumb" style="font-weight: 900;">-->
          <!--  <ol class="breadcrumb justify-content-center align-items-center">-->
          <!--    <li class="breadcrumb-item font-1">-->
          <!--      <a class="text-decoration-none text-primary-color" href="<?php echo home_url(); ?>">Home</a>-->
          <!--    </li>-->
          <!--    <li class="breadcrumb-item text-white active" aria-current="page"><?php the_title(); ?></li>-->
          <!--  </ol>-->
          <!--</nav>-->
        </div>
      </div>
    </section>
    <!-- #banner end -->
<!-- News Section -->
    <section class="section py-5 mb-5">
      <div class="b-container">
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mt-4">
            <?php
$news_query = new WP_Query(array(
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'posts_per_page' => 6,
    'orderby'        => 'date',
    'order'          => 'DESC',
));

if ($news_query->have_posts()) :
    while ($news_query->have_posts()) : $news_query->the_post();

        $image_url = get_the_post_thumbnail_url(get_the_ID(), 'large');

        if (!$image_url) {
            $image_url = get_template_directory_uri() . '/image/female-psychologist-talking-on-patient-on-sofa-dur-2024-11-19-10-05-17-utc.jpg';
        }

        $categories = get_the_category();
        $category_name = '';
        $category_link = '#';

        if (!empty($categories)) {
            $category_name = $categories[0]->name;
            $category_link = get_category_link($categories[0]->term_id);
        }
?>

<div class="col">
    <div class="card news-card shadow-lg">

        <div class="position-relative w-100"
            style="height: 250px; background-image: url('<?php echo esc_url($image_url); ?>'); background-size: cover; background-position: center;">

            <div class="position-absolute bg-dark"
                style="opacity: .1; top: 0; left:0; right: 0; bottom: 0;">
            </div>

            <div class="position-absolute text-white d-flex flex-column justify-content-center align-items-center bg-primary-color"
                style="bottom: 0; left: 0; width: 55px; height: 55px;">
                <h5 class="fw-bolder mb-0"><?php echo esc_html(get_the_date('d')); ?></h5>
                <small class="mt-0"><?php echo esc_html(get_the_date('M')); ?></small>
            </div>

            <?php if ($category_name) : ?>
                    <span class="position-absolute px-2 py-1 text-white rounded-1 bg-primary-color"
                        style="top:15px; left: 20px;">
                        <?php echo esc_html($category_name); ?>
                    </span>
            <?php endif; ?>

        </div>

        <div class="card-body p-4">
            <a href="<?php the_permalink(); ?>" class="card-title">
                <?php the_title(); ?>
            </a>

            <p class="text-muted-color">
                <?php echo esc_html(wp_trim_words(get_the_excerpt(), 2000, '...')); ?>
            </p>
        </div>

    </div>
</div>

<?php
    endwhile;
    wp_reset_postdata();
endif;
?>
        </div>
      </div>
    </section>
    <!-- #news end -->

  </main>
  <!-- #main end -->
<?php get_footer(); ?>