<?php get_header(); ?>

      <div class="container my-1  bg-light text-dark">
        
        <div class="row">
          <div class="col-md-4">
             <?php get_sidebar(); ?>
          </div>
          <div class="col-md-8">
            <hr>
                <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

                 <article class="container pt-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()) : ?>
        <a href="<?php the_permalink(); ?>">
          
            <?php the_post_thumbnail('large', ['class' => 'img-fluid']); ?>
          
        </a>
    <?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">
      <?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
$post_url = urlencode(get_permalink());
$post_title = urlencode(get_the_title());
?>

     <div class="row">
       <div class="col-sm-8">
         
<div class="social-share-buttons my-4 d-flex gap-3 flex-wrap ml-2 text-justify-center row">
<h3 class="h3">
  <?php echo esc_html__('Share:', 'howcan'); ?>
</h3>
    <?php if (get_theme_mod('howcan_enable_facebook_share', true)) : ?>
        <a class="btn btn-primary ml-2" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_url($post_url); ?>" 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 ml-2" href="https://twitter.com/intent/tweet?url=<?php echo esc_url($post_url); ?>&text=<?php echo esc_html($post_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 ml-2" href="https://api.whatsapp.com/send?text=<?php echo esc_html($post_title . ' ' . $post_url); ?>" 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 ml-2" onclick="howcanCopyLink(this, '<?php echo esc_url(get_permalink()); ?>')">
            <i class="fas fa-link"></i>
        </button>
    <?php endif; ?>

</div>

       </div>
       <div class="col-sm-4">
      <p class="text-muted pl-2">
                              <?php
if ( get_theme_mod( 'howcan_enable_post_views', true ) ) {
    echo '<div class="post-views">' . esc_html( howcan_get_post_views( get_the_ID() ) ) . '</div>';
}
?>
                            </p>     
         
       </div>
     </div>            
          
                    <!-- 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 text-light">';
       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 text-light">';
       echo $next;
       echo '</div>';
       
     }
        
        ?>
    </div>
  </nav>
<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>
    
      </div>
        
<?php get_footer(); ?>