<?php
/**
 * The template for displaying all single posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package shopbar
 */

get_header();

$shopbar_blog_page_id = get_option( 'page_for_posts' );
$shopbar_blog_home    = $shopbar_blog_page_id ? get_permalink( $shopbar_blog_page_id ) : home_url( '/?post_type=post' );
?>

<div class="container">

    <!-- Breadcrumb -->
    <nav class="blog-breadcrumb" aria-label="<?php esc_attr_e( 'Breadcrumb', 'shopbar' ); ?>">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'shopbar' ); ?></a>
        <?php shopbar_icon( 'chevron-right', 11 ); ?>
        <a href="<?php echo esc_url( $shopbar_blog_home ); ?>"><?php esc_html_e( 'Blog', 'shopbar' ); ?></a>
        <?php
        $shopbar_single_categories = get_the_category();
        if ( ! empty( $shopbar_single_categories ) ) :
            shopbar_icon( 'chevron-right', 11 );
        ?>
            <a href="<?php echo esc_url( get_category_link( $shopbar_single_categories[0]->term_id ) ); ?>"><?php echo esc_html( $shopbar_single_categories[0]->name ); ?></a>
        <?php endif; ?>
        <?php shopbar_icon( 'chevron-right', 11 ); ?>
        <span class="bc-current"><?php the_title(); ?></span>
    </nav>

    <div class="article-layout">

        <!-- Article Main -->
        <?php
        while ( have_posts() ) :
            the_post();

            $shopbar_single_categories = get_the_category();
            $shopbar_reading_time    = shopbar_estimated_reading_time( get_the_content() );
        ?>
        <article class="article-main fade-in" id="articleContainer">

            <?php if ( ! empty( $shopbar_single_categories ) ) : ?>
            <a href="<?php echo esc_url( get_category_link( $shopbar_single_categories[0]->term_id ) ); ?>" class="article-category">
                <?php echo esc_html( strtoupper( $shopbar_single_categories[0]->name ) ); ?>
            </a>
            <?php endif; ?>

            <h1 class="article-title font-display"><?php the_title(); ?></h1>

            <div class="article-meta-row">
                <div class="article-meta-flex">
                    <span><?php shopbar_icon( 'user', 14 ); ?> <?php esc_html_e( 'By', 'shopbar' ); ?> <?php the_author(); ?></span>
                    <span><?php shopbar_icon( 'calendar', 14 ); ?> <?php echo esc_html( get_the_date() ); ?></span>
                    <span><?php shopbar_icon( 'clock', 14 ); ?> <?php echo esc_html( $shopbar_reading_time ); ?> <?php esc_html_e( 'min read', 'shopbar' ); ?></span>
                </div>
                <div class="article-share">
                    <span><?php esc_html_e( 'Share', 'shopbar' ); ?>:</span>
                    <div class="article-share-icons">
                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo rawurlencode( get_permalink() ); ?>" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on Facebook', 'shopbar' ); ?>"><?php shopbar_icon( 'facebook', 14 ); ?></a>
                        <a href="https://x.com/intent/tweet?url=<?php echo rawurlencode( get_permalink() ); ?>&text=<?php echo rawurlencode( get_the_title() ); ?>" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on X', 'shopbar' ); ?>"><?php shopbar_icon( 'twitter', 14 ); ?></a>
                        <a href="https://pinterest.com/pin/create/button/?url=<?php echo rawurlencode( get_permalink() ); ?>&description=<?php echo rawurlencode( get_the_title() ); ?>" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on Pinterest', 'shopbar' ); ?>"><?php shopbar_icon( 'pinterest', 14 ); ?></a>
                        <a href="mailto:?subject=<?php echo rawurlencode( get_the_title() ); ?>&body=<?php echo rawurlencode( get_permalink() ); ?>" aria-label="<?php esc_attr_e( 'Share by Email', 'shopbar' ); ?>"><?php shopbar_icon( 'mail', 14 ); ?></a>
                    </div>
                </div>
            </div>

            <?php if ( has_post_thumbnail() ) : ?>
            <div class="article-featured-image">
                <?php the_post_thumbnail( 'full' ); ?>
            </div>
            <?php endif; ?>

            <!-- Article Body -->
            <div class="article-body">
                <?php the_content(); ?>
            </div>

            <!-- Share Row -->
            <div class="article-share-row">
                <span><?php esc_html_e( 'Share this story', 'shopbar' ); ?></span>
                <a href="https://x.com/intent/tweet?url=<?php echo rawurlencode( get_permalink() ); ?>&text=<?php echo rawurlencode( get_the_title() ); ?>" class="share-pill" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'X', 'shopbar' ); ?></a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo rawurlencode( get_permalink() ); ?>" class="share-pill" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Facebook', 'shopbar' ); ?></a>
            </div>

            <!-- Author Box -->
            <div class="author-box">
                <div><?php echo get_avatar( get_the_author_meta( 'ID' ), 64, '', get_the_author(), array( 'class' => 'author-avatar' ) ); ?></div>
                <div class="author-info">
                    <h4><?php the_author(); ?></h4>
                    <?php if ( get_the_author_meta( 'description' ) ) : ?>
                        <p><?php echo esc_html( wp_strip_all_tags( get_the_author_meta( 'description' ) ) ); ?></p>
                    <?php endif; ?>
                    <div class="author-social">
                        <a href="#" aria-label="<?php esc_attr_e( 'Facebook', 'shopbar' ); ?>"><?php shopbar_icon( 'facebook', 16 ); ?></a>
                        <a href="#" aria-label="<?php esc_attr_e( 'Instagram', 'shopbar' ); ?>"><?php shopbar_icon( 'instagram', 16 ); ?></a>
                        <a href="#" aria-label="<?php esc_attr_e( 'X (Twitter)', 'shopbar' ); ?>"><?php shopbar_icon( 'twitter', 16 ); ?></a>
                        <a href="#" aria-label="<?php esc_attr_e( 'Pinterest', 'shopbar' ); ?>"><?php shopbar_icon( 'pinterest', 16 ); ?></a>
                    </div>
                </div>
            </div>

            <!-- Post Navigation -->
            <?php
            $shopbar_prev_post = get_previous_post();
            $shopbar_next_post = get_next_post();
            if ( $shopbar_prev_post || $shopbar_next_post ) :
            ?>
            <nav class="post-nav" aria-label="<?php esc_attr_e( 'Post navigation', 'shopbar' ); ?>">
                <?php if ( $shopbar_prev_post ) : ?>
                <a href="<?php echo esc_url( get_permalink( $shopbar_prev_post ) ); ?>" class="post-nav-item">
                    <?php if ( has_post_thumbnail( $shopbar_prev_post ) ) : ?>
                        <?php echo get_the_post_thumbnail( $shopbar_prev_post, 'thumbnail', array( 'class' => 'post-nav-thumb' ) ); ?>
                    <?php else : ?>
                        <span class="post-nav-thumb"></span>
                    <?php endif; ?>
                    <div class="post-nav-body">
                        <span class="post-nav-label"><?php shopbar_icon( 'chevron-left', 13 ); ?> <?php esc_html_e( 'Previous Post', 'shopbar' ); ?></span>
                        <span class="post-nav-title"><?php echo esc_html( get_the_title( $shopbar_prev_post ) ); ?></span>
                    </div>
                </a>
                <?php else : ?>
                <span></span>
                <?php endif; ?>

                <?php if ( $shopbar_next_post ) : ?>
                <a href="<?php echo esc_url( get_permalink( $shopbar_next_post ) ); ?>" class="post-nav-item next">
                    <?php if ( has_post_thumbnail( $shopbar_next_post ) ) : ?>
                        <?php echo get_the_post_thumbnail( $shopbar_next_post, 'thumbnail', array( 'class' => 'post-nav-thumb' ) ); ?>
                    <?php else : ?>
                        <span class="post-nav-thumb"></span>
                    <?php endif; ?>
                    <div class="post-nav-body">
                        <span class="post-nav-label"><?php esc_html_e( 'Next Post', 'shopbar' ); ?> <?php shopbar_icon( 'chevron-right', 13 ); ?></span>
                        <span class="post-nav-title"><?php echo esc_html( get_the_title( $shopbar_next_post ) ); ?></span>
                    </div>
                </a>
                <?php endif; ?>
            </nav>
            <?php endif; ?>

            <!-- Comments Section -->
            <?php
            if ( comments_open() || get_comments_number() ) :
            ?>
            <div class="article-comments-container fade-in">
                <div class="comments-inner">
                    <div class="comments-header">
                        <h2 class="comments-title font-display"><?php esc_html_e( 'Discussion', 'shopbar' ); ?></h2>
                        <span class="comments-count"><?php echo esc_html( get_comments_number() ); ?> <?php esc_html_e( 'Comments', 'shopbar' ); ?></span>
                    </div>
                    <?php comments_template(); ?>
                </div>
            </div>
            <?php endif; ?>

        </article>
        <?php endwhile; ?>

        <!-- Sidebar -->
        <?php get_template_part( 'template-parts/blog/blog-sidebar' ); ?>

    </div>
</div>

<?php shopbar_related_blog_posts(); ?>

<?php
get_footer();
