single.php

<?php

/**
 * Single post template file.
 *
 * Displays full content for an individual post and related sections.
 *
 * @package tailwind_wordpress_template
 * @since 1.0.0
 */

if (!defined('ABSPATH')) {
  exit;
}

get_header();
?>

<main
  id="main"
  class="site-main">
  <div class="container max-w-4xl mx-auto px-4 py-12">
    <div class="flex flex-col md:flex-row gap-8">
      <div class="flex-1">
        <?php
        while (have_posts()) :
          the_post();

          $categories = get_the_category();

          $slug = 'post';
          $archive_title = __('Posts', 'tailwind_wordpress_template');

          if (!empty($categories)) {
            $category = $categories[0];
            $slug = $category->slug;
            $archive_title = $category->name;
          }

          get_template_part('template-parts/content-section-title', null, array(
            'icon_name' => 'icon-' . $slug,
            'title' => $archive_title,
          ));
        ?>
          <article
            id="post-<?php the_ID(); ?>"
            <?php post_class('mb-8'); ?>>
            <?php if (has_post_thumbnail()) : ?>
              <div class="post-thumbnail">
                <?php the_post_thumbnail('large', array('class' => 'w-full h-auto max-h-[400px] object-cover')); ?>
              </div>
            <?php endif; ?>

            <header class="entry-header my-10 pb-4 border-b-2 border-primary-600">
              <div class="entry-title-container flex gap-2 items-end">
                <?php the_title('<h1 class="entry-title flex-1 text-xl lg:text-3xl font-bold break-all">', '</h1>'); ?>
                <span class="posted-on flex-shrink-0 text-sm lg:text-base mb-1">
                  <?php echo get_the_date('Y.m.d'); ?>
                </span>
              </div>
              <?php
                // <div class="entry-meta text-sm text-gray-600 mt-4">
                //   <span class="byline">
                //   </span>
                //   $categories = get_the_category();
                //   if (!empty($categories)) {
                //     echo '<span class="cat-links ml-4">';
                //     the_category(', ');
                //     echo '</span>';
                //   }
                // </div>
                ?>
            </header>

            <div class="entry-content prose max-w-none">
              <?php
              the_content();

              wp_link_pages(array(
                'before' => '<div class="page-links mt-6">' . __('Pages:', 'tailwind_wordpress_template'),
                'after'  => '</div>',
              ));
              ?>
            </div>

            <?php
            $tags = get_the_tags();
            if ($tags) :
            ?>
              <div class="entry-tags mt-6">
                <span class="text-sm font-semibold"><?php echo __('Tags:', 'tailwind_wordpress_template'); ?></span>
                <?php
                foreach ($tags as $tag) {
                  echo '<a href="' . esc_url(get_tag_link($tag->term_id)) . '" class="inline-block bg-gray-200 hover:bg-gray-300 px-3 py-1 text-sm mr-2 mt-2">' . esc_html($tag->name) . '</a>';
                }
                ?>
              </div>
            <?php endif; ?>

            <?php
              $link_class = 'flex gap-2 items-center text-primary-600 border-b border-transparent hover:text-primary-700 transition-all duration-300 hover:border-primary-700';
            ?>
            <nav class="post-navigation mt-12 pt-8 border-t border-gray-200">
              <div class="flex justify-between">
                <div class="nav-previous">
                  <?php
                  $prev_post = get_previous_post();
                  if ($prev_post) {
                    echo '<a href="' . esc_url(get_permalink($prev_post->ID)) . '" class="' . $link_class . '">';
                    echo render_icon('icon-left', 24, 'w-6 h-6') . __('Previous Post', 'tailwind_wordpress_template');
                    echo '</a>';
                  }
                  ?>
                </div>
                <div class="nav-next">
                  <?php
                  $next_post = get_next_post();
                  if ($next_post) {
                    echo '<a href="' . esc_url(get_permalink($next_post->ID)) . '" class="' . $link_class . '">';
                    echo __('Next Post', 'tailwind_wordpress_template') . tailwind_wordpress_template_get_icon('icon-right', 24, 'w-6 h-6');
                    echo '</a>';
                  }
                  ?>
                </div>
              </div>
            </nav>
          </article>


          <?php
          $current_categories = get_the_category();
          $current_post_id = get_the_ID();

          if (!empty($current_categories)) {
            $category_id = $current_categories[0]->term_id;
            $category_name = $current_categories[0]->name;

            $current_page = isset($_GET['related_page']) ? max(1, intval($_GET['related_page'])) : 1;

            $posts_per_page = 10;

            $offset = ($current_page - 1) * $posts_per_page;

            $related_args = array(
              'post_type' => 'post',
              'posts_per_page' => $posts_per_page,
              'offset' => $offset,
              'post__not_in' => array($current_post_id),
              'orderby' => 'date',
              'order' => 'DESC',
              'category__in' => array($category_id),
            );

            $related_query = new WP_Query($related_args);

            $total_args = array(
              'post_type' => 'post',
              'posts_per_page' => -1,
              'post__not_in' => array($current_post_id),
              'category__in' => array($category_id),
              'fields' => 'ids',
            );
            $total_query = new WP_Query($total_args);
            $total_posts = $total_query->found_posts;
            $total_pages = ceil($total_posts / $posts_per_page);
            wp_reset_postdata();

            if ($related_query->have_posts()) :
          ?>
            <div id="related-posts-section" class="related-posts-section max-w-2xl mx-auto mt-20 pt-6">
              <h2 class="text-xl font-normal text-primary-600 mb-4 border-l-4 border-primary-600 pl-4 py-1 leading-none">
                <?php
                echo sprintf(__('Latest %s Posts', 'tailwind_wordpress_template'), esc_html($category_name));
                ?>
              </h2>

              <div class="related-posts-list">
                <?php
                while ($related_query->have_posts()) :
                  $related_query->the_post();

                  $button_classes = 'w-8 h-8 ' .
                    'bg-gray-100 hover:bg-gray-200 border border-transparent p-1 ' .
                    'transition-all duration-200 flex items-center justify-center ' .
                    'focus:outline-none focus:ring-2 focus:ring-primary-600 '.
                    'group-hover:border-primary-600 group-hover:text-primary-600 group-hover:bg-white';
                ?>
                  <article class="related-post-item group border-b border-gray-200 p-2 hover:bg-gray-50 transition-colors duration-200 hover:text-primary-600">
                    <a href="<?php echo esc_url(get_permalink()); ?>" class="block">
                      <div class="flex items-center gap-4">
                        <h3 class="flex-1 truncate font-normal text-lg">
                          <?php the_title(); ?>
                        </h3>
                        <div class="flex-shrink-0 flex items-center gap-2 text-sm group-hover:opacity-60">
                          <time datetime="<?php echo esc_attr(get_the_date('c')); ?>">
                            <?php echo get_the_date('Y.m.d'); ?>
                          </time>
                          <span class="<?php classnames_echo($button_classes); ?>" aria-label="<?php esc_attr_e('Next Page', 'tailwind_wordpress_template'); ?>">
                            <svg class="w-full h-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 5l7 7-7 7" />
                            </svg>
                          </span>
                        </div>
                      </div>
                    </a>
                  </article>
                <?php
                endwhile;
                wp_reset_postdata();
                ?>
              </div>

              <?php
              get_template_part('single-pagination', null, array(
                'total_pages' => $total_pages,
                'current_page' => $current_page,
                'current_url' => get_permalink(),
              ));
              ?>
            </div>
          <?php
            endif;
          }
          ?>

          <?php
          if (tailwind_wordpress_template_should_show_comments()) {
            comments_template();
          }
          ?>

        <?php
        endwhile;
        ?>
      </div>

      <?php //get_sidebar(); ?>
    </div>
  </div>
</main>

<?php
get_footer();
?>