<?php get_header(); ?>

  <!-- PAGE HERO -->
  <header class="page-hero">
    <canvas class="net-canvas" data-net data-net-density="20000"></canvas>
    <div class="container">
      <h1 class="reveal">BLOGS</h1>
      <div class="breadcrumb-gx reveal d1">
        <a href="<?php echo GX_MAIN_SITE_URL; ?>/index.php">Home</a>
        <i class="bi bi-chevron-right"></i>
        <span class="current">BLOGS</span>
      </div>
    </div>
  </header>

<!-- ==========================================================================
     BLOG LATEST POSTS SECTION
     ========================================================================== -->
<section class="blog-section">
  <div class="container position-relative z-1">

    <!-- BLOG LIST MATRIX -->
    <div class="blog-list-wrapper">

      <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
          <div class="blog-row-item">
            <div class="row align-items-center g-4">
              <div class="col-md-7 col-lg-8">
                <span class="blog-date"><?php echo get_the_date('j F Y'); ?></span>
                <h3 class="blog-title"><?php the_title(); ?></h3>
                <p class="blog-excerpt"><?php echo get_the_excerpt(); ?></p>
                <a href="<?php the_permalink(); ?>" class="blog-link">
                  <span class="link-icon"><i class="fa-solid fa-arrow-right"></i></span>
                  Read More
                </a>
              </div>
              <div class="col-md-5 col-lg-4">
                <div class="blog-image-wrapper">
                  <?php if (has_post_thumbnail()) : ?>
                    <?php the_post_thumbnail('gx-blog-card', ['alt' => get_the_title()]); ?>
                  <?php else : ?>
                    <img src="<?php echo GX_MAIN_SITE_URL; ?>/images/blogimg1.png" alt="<?php the_title_attribute(); ?>" />
                  <?php endif; ?>
                </div>
              </div>
            </div>
          </div>
        <?php endwhile; ?>
      <?php else : ?>
        <p>No blog posts yet.</p>
      <?php endif; ?>

    </div>

    <!-- PAGINATION CONTROL COMPONENT -->
    <?php
    global $wp_query;
    $total_pages = $wp_query->max_num_pages;
    if ($total_pages > 1) :
        $current_page = max(1, get_query_var('paged'));
    ?>
    <div class="blog-pagination">
      <a href="<?php echo get_pagenum_link(max(1, $current_page - 1)); ?>" class="pag-btn prev-btn"><i class="fa-solid fa-chevron-left"></i></a>
      <?php for ($i = 1; $i <= $total_pages; $i++) : ?>
        <a href="<?php echo get_pagenum_link($i); ?>" class="pag-num<?php echo $i === $current_page ? ' active' : ''; ?>"><?php echo $i; ?></a>
      <?php endfor; ?>
      <a href="<?php echo get_pagenum_link(min($total_pages, $current_page + 1)); ?>" class="pag-btn next-btn"><i class="fa-solid fa-chevron-right"></i></a>
    </div>
    <?php endif; ?>

  </div>
</section>

<?php get_footer(); ?>
