<?php get_header(); ?>



    <!--====== Single Post Section ======-->

    <main id="primary" class="site-main py-5">
    <div class="container">
        <div class="row  justify-content-center">
            

            <?php
                if(have_posts()):
                    while(have_posts()): the_post();
             ?>
            <div class="col-lg-8">

               <article class="" id="post-<?php the_ID(); ?>" <?php post_class('single-article'); ?>>


                    <figure class="mb-5">
                        <?php 
                            if(has_post_thumbnail()):
                                the_post_thumbnail('large', [
                                    'class' => 'img-fluid rounded',
                                    'alt' => esc_attr( get_the_title() ),
                                ]);
                            endif;
                        ?>

                    </figure>

                    <header class="entry-header mb-4">
                        <span class="badge bg-danger text-decoration-none text-white mb-2"><?php the_category(', ')?></span>
                        
                        <h1 class="entry-title fw-bold display-5 mb-3"><?php the_title(); ?></h1>

                        <p class="card-text text-muted small mb-2">
                            <i class="bi bi-person me-1"></i><?php esc_html_e( 'By', 'mohi' ); ?> <?php the_author(); ?>
                            &nbsp;|&nbsp;
                            <a href="<?php the_permalink(); ?>" class="text-muted text-decoration-none">
                                <i class="bi bi-calendar me-1"></i>
                                <?php echo esc_html( get_the_date('d M, Y') ); ?>
                            </a>
                                &nbsp;|&nbsp;
                            <a ><i class="bi bi-chat-left"></i></a>
                           <?php comments_popup_link( esc_html__( 'Leave a comment', 'mohi' ), esc_html__( '1 Comment', 'mohi' ), esc_html__( '% Comments', 'mohi' ), 'comment-link' ); ?>
                        </p>
                        <hr>
                    </header>

                    <div class="entry-content d-flex flex-wrap ">
                        <?php the_content(); ?>

                        <?php
                        // For multi-page posts
                        wp_link_pages( array(
                            'before'      => '<div class="page-links">' . esc_html__( 'Pages:', 'mohi' ),
                            'after'       => '</div>',
                            'link_before' => '<span class="page-number">',
                            'link_after'  => '</span>',
                        ) );
                        ?>
                    </div>

                    <footer class="entry-footer mt-5 pt-3 border-top">
                        <div class="d-sm-flex justify-content-between align-items-center">

                            <?php if ( has_tag() ) : ?>
                            <div class="post-tags mb-2 d-flex flex-wrap align-items-center gap-2">

                                <span class="fw-bold me-2"><?php esc_html_e( 'Tags:', 'mohi' ); ?></span>

                                <?php
                                $tags = get_the_tags();
                                foreach ( $tags as $tag ) :
                                ?>
                                    <a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>"
                                    class="text-dark border p-1 rounded text-decoration-none">
                                        <?php echo esc_html( $tag->name ); ?>
                                        <span class="ms-1 text-muted">(<?php echo esc_html( $tag->count ); ?>)</span>
                                    </a>
                                <?php endforeach; ?>

                            </div>
                            <?php endif; ?>


                            <div class="share-icons d-flex align-items-center">
                                <span class="fw-bold pt-3 me-3"><?php esc_html_e( 'Share:', 'mohi' ); ?></span>


                            <?php
                            $post_url   = urlencode( get_permalink() );
                            $post_title = urlencode( get_the_title() );
                            ?>

                        <div class="mt-3 socail d-flex gap-3">

                            <!-- Facebook -->
                            <a href="<?php echo esc_url( 'https://www.facebook.com/sharer/sharer.php?u=' . $post_url ); ?>" target="_blank" class="text-reset" aria-label="<?php esc_attr_e( 'Share on Facebook', 'mohi' ); ?>"><i class="bi bi-facebook"></i></a>

                            <!-- Twitter (X) -->
                            <a href="<?php echo esc_url( 'https://twitter.com/intent/tweet?url=' . $post_url . '&text=' . $post_title ); ?>"target="_blank"class="text-reset"aria-label="<?php esc_attr_e( 'Share on Twitter', 'mohi' ); ?>"><i class="bi bi-twitter-x"></i></a>

                            <!-- Instagram (Profile link – no share API) -->
                            <a href="<?php echo esc_url( get_theme_mod( 'mohi_insta_url', '#' ) ); ?>"target="_blank"class="text-reset"aria-label="<?php esc_attr_e( 'Instagram', 'mohi' ); ?>"><i class="bi bi-instagram"></i></a>

                            <!-- LinkedIn -->
                            <a href="<?php echo esc_url( 'https://www.linkedin.com/sharing/share-offsite/?url=' . $post_url ); ?>"target="_blank"class="text-reset"aria-label="<?php esc_attr_e( 'Share on LinkedIn', 'mohi' ); ?>"><i class="bi bi-linkedin"></i></a>

                        </div>

                                  
                            </div>
                        </div>
                    </footer>
                </article>

                <div class="author-box d-flex align-items-center bg-light p-4 rounded mt-5">
                    <?php 
                        echo get_avatar(
                            get_the_author_meta('ID'),
                            120,
                            '',
                            get_the_author(),
                            array('class' => 'rounded-circle me-4')
                        );
                    ?> 
                    <div>
                        <h5 class="mb-0"><?php echo esc_html( get_the_author_meta( 'user_login' ) ); ?></h5>
                        <p class="mb-0"><?php echo esc_html( get_the_author_meta( 'description' ) ); ?></p>
                    </div>
                </div>
                
                <?php if( comments_open() || get_comments_number()):
                    comments_template();
                endif; ?>
                
                
               
            </div>
            
            <?php
                endwhile; else:
             ?>
                <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'mohi' ); ?></p>
            <?php
                endif;
            ?>
           <?php get_sidebar(); ?> 

        </div>
    </div>
</main>



<?php get_footer(); ?>