<?php
/**
 * Template Name: Newspaper Single
 * Template Post Type: post
 */
get_header();
?>

<div class="container my-5 newspaper-single">
  <div class="row">
    <!-- 📰 Main Article -->
    <div class="col-sm-12"> 

      <?php if (have_posts()): while (have_posts()): the_post(); ?>
        <article class="card border-0 shadow-sm mb-4">
    <?php if ( has_post_thumbnail() ) : 
    $thumb_id   = get_post_thumbnail_id();
    $thumb_alt  = get_post_meta( $thumb_id, '_wp_attachment_image_alt', true );
    $thumb_caption = get_the_excerpt( $thumb_id ); // caption text
?>
  <div class="post-thumb mb-3 text-center">
    <?php the_post_thumbnail( 'full', [
      'class' => 'img-fluid w-100 rounded',
      'style' => 'object-fit: cover; height: auto;',
      'alt'   => esc_attr( $thumb_alt ? $thumb_alt : get_the_title() ),
    ] ); ?>

   
    <?php if ( $thumb_caption ) : ?>
      <p class="image-caption mt-2 text-small fst-italic">
     
        <?php echo esc_html( $thumb_caption ); ?>
      </p>
    <?php endif; ?>
    
    
  </div>
<?php endif; ?>
          <div class="card-body">
          
           
         
 
   <?php 
   $cat = the_category(', ');
   
   ?>
 <h1 class="fw-bold mb-3"><?php $cat.the_title(); ?></h1>
          
            <div class="post-content fs-5 text-secondary">
              <?php the_content(); ?>
            </div>

            <div class="border-top mt-4 pt-3 d-flex justify-content-between">
           <?php
$tags = get_the_tags();

if ($tags) :
    // Bootstrap color class 
    $badge_colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark'];
    
    $text_colors = ['light', 'light', 'info', 'dark', 'success', 'primary', 'light'];
   
    
    $i = 0;
    ?>
    <div class="post-tags mb-4">
      <hr>
        <strong><?php esc_html_e('Tags:', 'howcan'); ?></strong>
        <?php foreach ($tags as $tag) : ?>
            <?php
            // Dynamic color pick
            $color_class = $badge_colors[$i % count($badge_colors)];
            
            $text_color_class = $text_colors[$i % count($text_colors)];
            
            $i++;
            ?>
            <a href="<?php echo esc_url(get_tag_link($tag->term_id)); ?>" class="badge bg-<?php echo esc_attr($color_class); ?> text-decoration-none me-1 text-<?php echo esc_attr($text_color_class); ?>">
                <?php echo esc_html($tag->name); ?>
            </a>
        <?php endforeach; ?>
    </div>
<?php endif; ?>  
              <span class="small text-small"><?php comments_number('No Comments', '1 Comment', '% Comments'); ?></span>
            </div>
          </div>
        </article>

<div class="container author-info">
  <div class="row">
    <div class="col-sm-3 ath-img">
      <?php 
   echo $author_img =  get_avatar(get_the_author_meta('ID'),100);
    
    ?>
    </div>
    <div class="col-sm-8">
      <h4><?php 
      the_author();
      ?></h4>
       <p><?php 
  echo  get_the_author_meta('description');
    ?> </p>
    </div>
  </div>
</div>
        <!-- 💬 Comments -->
        <?php comments_template(); ?>

        <!-- 🔗 Related Posts -->
        <div class="related-posts mt-5">
          <h4 class="fw-bold border-bottom pb-2 mb-3">Related </h4>
          <div class="row">
            <?php
              $related = get_posts([
                'category__in' => wp_get_post_categories(get_the_ID()),
                'numberposts' => 3,
                'post__not_in' => [get_the_ID()]
              ]);
              if ($related) :
                foreach ($related as $post) :
                  setup_postdata($post);
            ?>
              <div class="col-md-4 mb-4">
                <div class="card border-0 shadow-sm h-100">
                  <?php if (has_post_thumbnail()): ?>
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium', ['class'=>'img-fluid rounded-top']); ?></a>
                  <?php endif; ?>
                  <div class="card-body p-3">
                    <a href="<?php the_permalink(); ?>" class="text-decoration-none text-dark fw-semibold d-block mb-2">
                      <?php the_title(); ?>
                    </a>
                    <small class="text-muted"><?php echo get_the_date(); ?></small>
                  </div>
                </div>
              </div>
            <?php
                endforeach;
                wp_reset_postdata();
              else:
                echo '<p class="text-muted">No related posts found.</p>';
              endif;
            ?>
          </div>
        </div>
      <?php endwhile; endif; ?>
    </div>

   
  </div>
</div>

<!-- ✨ Styles -->
<style>
.newspaper-single h1 { font-size: 2rem; line-height: 1.3; }
.newspaper-single .post-content p { margin-bottom: 1rem; }
.newspaper-single .related-posts h4 { font-size: 1.4rem; }
.smartlink-ad { transition: opacity 1s ease-in-out; opacity: 0; }
.smartlink-ad.visible { display: block !important; opacity: 1; }
</style>

<!-- ⚡ Smartlink Fade Script -->
<script>
document.addEventListener('scroll', function() {
  const ad = document.getElementById('smartlink-ad');
  if (!ad.classList.contains('visible')) {
    const triggerHeight = window.innerHeight / 1.3;
    const adTop = ad.getBoundingClientRect().top;
    if (adTop < triggerHeight) {
      ad.classList.add('visible');
    }
  }
});
</script>

<?php get_footer(); ?>