<?php
/*
Template Name: Blog
*/
get_header();

$paged = max(1, (int) get_query_var('paged'), (int) get_query_var('page'));
$latest_query = new WP_Query([
  'post_type' => 'post',
  'posts_per_page' => 1,
  'post_status' => 'publish',
]);
$latest_post_id = $latest_query->have_posts() ? (int) $latest_query->posts[0]->ID : 0;
$exclude_ids = $latest_post_id ? [$latest_post_id] : [];
$blog_query = new WP_Query([
  'post_type' => 'post',
  'paged' => $paged,
  'posts_per_page' => 8,
  'post_status' => 'publish',
  'post__not_in' => $exclude_ids,
]);
$exclude_ids_string = implode(',', $exclude_ids);
?>

<main class="fjord-main fjord-blog">
  <section class="fjord-blog__layout">
    <div class="fjord-blog__featured">
      <?php if ($latest_query->have_posts()) : ?>
        <?php while ($latest_query->have_posts()) : $latest_query->the_post(); ?>
          <article <?php post_class('fjord-blog-card fjord-blog-card--featured'); ?>>
            <a class="fjord-blog-card__link" href="<?php the_permalink(); ?>">
              <div class="fjord-blog-card__media">
                <?php if (has_post_thumbnail()) : ?>
                  <?php the_post_thumbnail('large'); ?>
                <?php else : ?>
                  <div class="fjord-blog-card__placeholder"></div>
                <?php endif; ?>
              </div>
              <div class="fjord-blog-card__footer">
                <span class="fjord-blog-card__badge"><?php esc_html_e('Nuevo', 'fjord-clone'); ?></span>
                <span class="fjord-blog-card__footer-title"><?php the_title(); ?></span>
                <span class="fjord-blog-card__read"><?php esc_html_e('Leer', 'fjord-clone'); ?></span>
              </div>
            </a>
          </article>
        <?php endwhile; ?>
      <?php endif; ?>
    </div>

    <div class="fjord-blog__content">
      <?php
      $blog_title = get_theme_mod('fjord_blog_title', 'Blog');
      $blog_lead = get_theme_mod('fjord_blog_lead', 'Explore photography tips, behind-the-scenes insights, and creative inspiration from my projects and personal work.');
      $blog_intro_bg = get_theme_mod('fjord_blog_background_color', '#f6f6f6');
      $blog_intro_text = get_theme_mod('fjord_blog_text_color', '#0e1011');
      $blog_para_color = get_theme_mod('fjord_blog_paragraph_color', '#0e1011');
      $intro_style = sprintf('background:%s;color:%s;', esc_attr($blog_intro_bg), esc_attr($blog_intro_text));
      ?>
      <section class="fjord-shop__intro fjord-blog__intro" style="<?php echo $intro_style; ?>">
        <h1 class="fjord-shop__title"><?php echo esc_html($blog_title); ?></h1>
        <p class="fjord-shop__lead" style="color: <?php echo esc_attr($blog_para_color); ?>;"><?php echo esc_html($blog_lead); ?></p>
      </section>

      <?php if ($blog_query->have_posts()) : ?>
        <section
          class="fjord-blog__grid"
          data-blog-grid
          data-blog-page="<?php echo esc_attr($paged); ?>"
          data-blog-total="<?php echo esc_attr($blog_query->max_num_pages); ?>"
          data-blog-exclude="<?php echo esc_attr($exclude_ids_string); ?>"
        >
          <?php while ($blog_query->have_posts()) : $blog_query->the_post(); ?>
            <?php echo fjord_clone_blog_card_markup(); ?>
          <?php endwhile; ?>
        </section>

        <?php if ($blog_query->max_num_pages > $paged) : ?>
          <div class="fjord-blog__load-more" data-blog-load-more>
            <?php esc_html_e('Cargando más artículos…', 'fjord-clone'); ?>
          </div>
        <?php endif; ?>
      <?php else : ?>
        <p class="fjord-blog__empty"><?php esc_html_e('No posts found.', 'fjord-clone'); ?></p>
      <?php endif; ?>
    </div>
  </section>
</main>

<?php
wp_reset_postdata();
get_footer();
?>
