<?php get_header(); ?>
<?php
// Get selected layout from Customizer
$single_layout = get_theme_mod('howcan_single_layout', 'default');

// If Newspaper selected → load newspaper template
if ($single_layout === 'newspaper') {
    get_template_part('single', 'newspaper');
    return;
}
?>
<?php
 
  //check 
  if( esc_html(get_theme_mod('show_sidebar_left'),'howcan') ){
  
  // Left: sidebar  
    get_template_part('template-parts/layout/left-sidebar-single');
  }else{
    // default right sidebar
   ?>
    <div class="my-1 bg-light text-dark container">
        
        <div class="row">
          <div class="col-md-8">
            <hr>
                <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                 <article class="p-2" id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="https://schema.org/BlogPosting">
                    
                    <!-- Title -->
                   
                    
                     <h2 style="border-left:3px solid black; padding-left:5px;font-size:30px;"  class="mb-3" itemprop="headline" id="" class="container">
                    <?php the_title(); ?>
          
                </h2>
            

                    <!-- breadcrumb -->
                
       <?php get_template_part( 'template-parts/breadcrumb' ); ?>          
                  
                          
                      

                    <!-- Featured Image -->
                  <div class="post-thumbnail-wrapper position-relative">
     <?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>

                    <!-- Content -->
                    <div style="font-size:20px;text-align:justify;" class="post-content mb-4 entry-content" itemprop="articleBody">
                        <?php the_content(); ?>
                          <!-- Tags -->
      <?php
wp_link_pages( array(
    'before' => '<div class="page-links"><span>' . __( 'Pages:', 'howcan' ) . '</span>',
    'after'  => '</div>',
) );
?>      
            
                <?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; ?>  
                  
                    </div>
                    <hr>
<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>


<hr>
<?php
// Get post URL and title safely
$post_url   = urlencode( get_permalink() );
$post_title = urlencode( get_the_title() );
?>

<div class="row align-items-center my-3">
  <div class="col-sm-8 d-flex flex-wrap align-items-center gap-2">
    
    <h3 class="h5 mb-0 me-2">
      <?php echo esc_html__( 'Share:', 'howcan' ); ?>
    </h3>

    <?php if ( get_theme_mod( 'howcan_enable_facebook_share', true ) ) : ?>
      <a class="btn btn-primary text-white" 
         href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_attr( get_permalink() ); ?>" 
         target="_blank" rel="noopener noreferrer">
        <i class="fab fa-facebook-f"></i>
      </a>
    <?php endif; ?>

    <?php if ( get_theme_mod( 'howcan_enable_twitter_share', true ) ) : ?>
      <a class="btn btn-info text-white" 
         href="https://twitter.com/intent/tweet?url=<?php echo esc_attr( get_permalink() ); ?>&text=<?php echo esc_attr( get_the_title() ); ?>" 
         target="_blank" rel="noopener noreferrer">
        <i class="fab fa-twitter"></i>
      </a>
    <?php endif; ?>

    <?php if ( get_theme_mod( 'howcan_enable_whatsapp_share', true ) ) : ?>
      <a class="btn btn-success text-white" 
         href="https://api.whatsapp.com/send?text=<?php echo rawurlencode( get_the_title() . ' ' . get_permalink() ); ?>" 
         target="_blank" rel="noopener noreferrer">
        <i class="fab fa-whatsapp"></i>
      </a>
    <?php endif; ?>

    <?php if ( get_theme_mod( 'howcan_enable_copylink_share', true ) ) : ?>
      <button class="btn btn-secondary text-white" 
              onclick="howcanCopyLink('<?php echo esc_url( get_permalink() ); ?>')">
        <i class="fas fa-link"></i>
      </button>
    <?php endif; ?>
  </div>

  <div class="col-sm-4 text-end">
    <?php if ( get_theme_mod( 'howcan_enable_post_views', true ) ) : ?>
      <div class="text-muted small">
        <?php echo esc_html( howcan_get_post_views( get_the_ID() ) ); ?>
      </div>
    <?php endif; ?>
  </div>
</div>

<script>
function howcanCopyLink(url) {
  navigator.clipboard.writeText(url).then(function() {
    alert("✅ Link copied to clipboard!");
  }, function() {
    alert("❌ Failed to copy link.");
  });
}
</script>         <!-- Post Navigation -->
              
                    
  <nav class="post-navigation d-flex justify-content-between border-top pt-3 mt-5">
    
     <div class="prev-post">
       <?php
       
    $prv =  get_previous_post_link( '%link', '&laquo; Previous' ); 
     
    if(! empty($prv)){
        echo '<div class="btn btn-outline-dark pvp">';
       echo $prv;
       echo '</div>';
       
    } 
     
       
      
       ?>
      </div>
     <div class="next-post text-end">
        <?php
        
     $next =  get_next_post_link( '%link', 'Next &raquo;' ); 
     
     if(! empty($next)){
       
        echo '<div class="btn btn-outline-dark nep">';
       echo $next;
       echo '</div>';
       
     }
        
        ?>
    </div>
  </nav>
  
     <!-- 🔗 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>
<hr>


                    <!-- Comments -->
                    <?php if ( comments_open() || get_comments_number() ) : ?>
                        <div class="mt-5">
                            <?php comments_template(); ?>
                        </div>
                    <?php endif; ?>

                </article>

            <?php endwhile; else : ?>
                <p><?php esc_html_e( 'Sorry, no posts found.', 'howcan' ); ?></p>
            <?php endif; ?>
            
          </div>
          <div class="col-md-4">
             <?php get_sidebar(); ?>
          </div>
        </div>
    
      </div>
      <?php
  }
    
?>

        
<?php get_footer(); ?>