<?php
get_header();
?>

<main class="fjord-main fjord-blog-post">
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
      <?php
      $post_id = get_the_ID();
      $content = apply_filters('the_content', get_the_content());
      $intro_heading = '';
      if (preg_match('/<h[23][^>]*>.*?<\\/h[23]>/is', $content, $match)) {
        $intro_heading = $match[0];
        $content = preg_replace('/<h[23][^>]*>.*?<\\/h[23]>/is', '', $content, 1);
      }
      $split = preg_split('/(<h[23][^>]*>)/i', $content, 2, PREG_SPLIT_DELIM_CAPTURE);
      $intro_content = $content;
      $rest_content = '';
      if (count($split) > 1) {
        $intro_content = $split[0];
        $rest_content = $split[1] . $split[2];
      }
      $word_count = str_word_count(wp_strip_all_tags(get_post_field('post_content', $post_id)));
      $reading_time = max(1, (int) ceil($word_count / 200));
      $categories = get_the_category($post_id);
      $primary_category = !empty($categories) ? $categories[0] : null;
      ?>
      <section class="fjord-blog-post__layout">
        <aside class="fjord-blog-post__media">
          <div class="fjord-blog-post__media-inner">
            <?php if (has_post_thumbnail()) : ?>
              <?php the_post_thumbnail('large'); ?>
            <?php else : ?>
              <div class="fjord-blog-post__placeholder"></div>
            <?php endif; ?>
          </div>
        </aside>
        <div class="fjord-blog-post__content">
          <div class="fjord-blog-post__block fjord-blog-post__meta">
            <div class="fjord-blog-post__meta-item">
              <span class="fjord-blog-post__meta-label"><?php esc_html_e('Category', 'fjord-clone'); ?></span>
              <span class="fjord-blog-post__meta-value">
                <?php if ($primary_category) : ?>
                  <a href="<?php echo esc_url(get_category_link($primary_category->term_id)); ?>">
                    <?php echo esc_html($primary_category->name); ?>
                  </a>
                <?php else : ?>
                  <?php esc_html_e('Uncategorized', 'fjord-clone'); ?>
                <?php endif; ?>
              </span>
            </div>
            <div class="fjord-blog-post__meta-item">
              <span class="fjord-blog-post__meta-label"><?php esc_html_e('Reading time', 'fjord-clone'); ?></span>
              <span class="fjord-blog-post__meta-value">
                <?php echo esc_html($reading_time); ?> <?php esc_html_e('min', 'fjord-clone'); ?>
              </span>
            </div>
            <div class="fjord-blog-post__meta-item">
              <span class="fjord-blog-post__meta-label"><?php esc_html_e('Date', 'fjord-clone'); ?></span>
              <span class="fjord-blog-post__meta-value"><?php echo esc_html(get_the_date()); ?></span>
            </div>
          </div>

          <div class="fjord-blog-post__block fjord-blog-post__intro">
            <nav class="fjord-blog-post__breadcrumb" aria-label="Breadcrumb">
              <a href="<?php echo esc_url(home_url('/blog')); ?>"><?php esc_html_e('Blog', 'fjord-clone'); ?></a>
              <?php if ($primary_category) : ?>
                <span class="fjord-blog-post__breadcrumb-sep">/</span>
                <a href="<?php echo esc_url(get_category_link($primary_category->term_id)); ?>">
                  <?php echo esc_html($primary_category->name); ?>
                </a>
              <?php endif; ?>
              <span class="fjord-blog-post__breadcrumb-sep">/</span>
              <span><?php the_title(); ?></span>
            </nav>
            <h1><?php the_title(); ?></h1>
            <?php if (!empty($intro_heading)) : ?>
              <?php echo $intro_heading; ?>
            <?php elseif (has_excerpt()) : ?>
              <p class="fjord-blog-post__subtitle"><?php echo esc_html(get_the_excerpt()); ?></p>
            <?php endif; ?>
            <?php echo $intro_content; ?>
          </div>

          <?php if (!empty(trim(wp_strip_all_tags($rest_content)))) : ?>
            <div class="fjord-blog-post__block fjord-blog-post__body fjord-blog-post__body--secondary">
              <?php echo $rest_content; ?>
            </div>
          <?php endif; ?>

          <?php
          $prev_post = get_previous_post();
          $next_post = get_next_post();
          ?>
          <?php if ($prev_post || $next_post) : ?>
            <div class="fjord-blog-post__nav">
              <?php if ($prev_post) : ?>
                <a class="fjord-blog-post__nav-card" href="<?php echo esc_url(get_permalink($prev_post)); ?>">
                  <span class="fjord-blog-post__nav-label"><?php esc_html_e('Leer artículo anterior', 'fjord-clone'); ?></span>
                  <span class="fjord-blog-post__nav-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" focusable="false">
                      <path d="M7 12h10M7 12l4-4M7 12l4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none" />
                    </svg>
                  </span>
                </a>
              <?php endif; ?>
              <?php if ($next_post) : ?>
                <a class="fjord-blog-post__nav-card" href="<?php echo esc_url(get_permalink($next_post)); ?>">
                  <span class="fjord-blog-post__nav-label"><?php esc_html_e('Leer siguiente artículo', 'fjord-clone'); ?></span>
                  <span class="fjord-blog-post__nav-icon" aria-hidden="true">
                    <svg viewBox="0 0 24 24" focusable="false">
                      <path d="M7 12h10M17 12l-4-4M17 12l-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none" />
                    </svg>
                  </span>
                </a>
              <?php endif; ?>
            </div>
          <?php endif; ?>
        </div>
      </section>
    <?php endwhile; ?>
  <?php endif; ?>
</main>

<?php
get_footer();
