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

get_header();

?>

<!-- Breadcrumb Bar -->
<div class="single-breadcrumb-bar">
    <div class="container">
        <div class="single-breadcrumb">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'shop-zen' ); ?></a>
            <span class="sep">/</span>
            <?php
            $blog_page_id = get_option( 'page_for_posts' );
            if ( $blog_page_id ) :
            ?>
            <a href="<?php echo esc_url( get_permalink( $blog_page_id ) ); ?>"><?php esc_html_e( 'Journal', 'shop-zen' ); ?></a>
            <?php else : ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Blog', 'shop-zen' ); ?></a>
            <?php endif; ?>
            <span class="sep">/</span>
            <span class="current"><?php the_title(); ?></span>
        </div>
    </div>
</div>

<?php
while ( have_posts() ) :
    the_post();

    $categories   = get_the_category();
    $reading_time = shop_zen_estimated_reading_time( get_the_content() );
    $author_bio   = get_the_author_meta( 'description' );
    $post_tags    = get_the_tags();
?>

<section class="single-content-section">
    <div class="container">
        <div class="blog-layout">
            <article class="article-single fade-in" id="articleContainer">

                <!-- Article Header -->
                <header class="article-head">
                    <?php if ( ! empty( $categories ) ) : ?>
                    <div class="article-categories">
                        <?php foreach ( $categories as $category ) : ?>
                        <a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="article-category-pill"><?php echo esc_html( $category->name ); ?></a>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>

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

                    <div class="article-meta">
                        <span class="article-author">
                            <?php echo get_avatar( get_the_author_meta( 'ID' ), 28, '', '', array( 'class' => 'article-author-avatar' ) ); ?>
                            <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" class="article-author-name"><?php the_author(); ?></a>
                        </span>
                        <span class="article-meta-dot">&bull;</span>
                        <span class="article-meta-date"><?php echo esc_html( get_the_date() ); ?></span>
                        <span class="article-meta-dot">&bull;</span>
                        <span class="article-meta-read"><?php echo esc_html( $reading_time ); ?> <?php esc_html_e( 'min read', 'shop-zen' ); ?></span>
                    </div>
                </header>

                <!-- Featured Image -->
                <?php if ( has_post_thumbnail() ) : ?>
                <div class="article-hero">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
                <?php endif; ?>

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

                <!-- Share + Tags Row -->
                <div class="article-footer-row">
                    <div class="article-share-row">
                        <span><?php esc_html_e( 'Share:', 'shop-zen' ); ?></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" aria-label="<?php esc_attr_e( 'Share on X', 'shop-zen' ); ?>">
                            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                        </a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo rawurlencode( get_permalink() ); ?>" class="share-pill" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on Facebook', 'shop-zen' ); ?>">
                            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.99 3.66 9.13 8.44 9.88v-6.99H7.9v-2.89h2.54V9.41c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.23.2 2.23.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.87h2.78l-.44 2.89h-2.34v6.99C18.34 21.13 22 16.99 22 12"/></svg>
                        </a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo rawurlencode( get_permalink() ); ?>" class="share-pill" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on LinkedIn', 'shop-zen' ); ?>">
                            <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.32 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.79M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .92.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z"/></svg>
                        </a>
                    </div>

                    <?php if ( ! empty( $post_tags ) ) : ?>
                    <div class="article-tags">
                        <?php foreach ( $post_tags as $tag ) : ?>
                        <a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>" class="article-tag">#<?php echo esc_html( $tag->name ); ?></a>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>

                <!-- Author Bio -->
                <div class="article-author-box">
                    <?php echo get_avatar( get_the_author_meta( 'ID' ), 64, '', '', array( 'class' => 'article-author-box-avatar' ) ); ?>
                    <div class="article-author-box-body">
                        <h3 class="article-author-box-name"><?php the_author(); ?></h3>
                        <p class="article-author-box-meta"><?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?> &bull; <?php echo esc_html( count_user_posts( get_the_author_meta( 'ID' ), 'post', true ) ); ?> <?php esc_html_e( 'articles', 'shop-zen' ); ?></p>
                        <?php if ( $author_bio ) : ?>
                        <p class="article-author-box-bio"><?php echo esc_html( $author_bio ); ?></p>
                        <?php endif; ?>
                    </div>
                </div>

            </article>

            <?php get_template_part( 'template-parts/blog/blog-sidebar' ); ?>
        </div><!-- .blog-layout -->
    </div>
</section>

<?php endwhile; ?>

<!-- Comments Section -->
<?php
if ( comments_open() || get_comments_number() ) :
?>
<div class="single-after-section">
<div class="container">
<div class="blog-layout">
<div class="blog-content">
<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', 'shop-zen' ); ?></h2>
            <span class="comments-count"><?php echo esc_html( get_comments_number() ); ?> <?php esc_html_e( 'Comments', 'shop-zen' ); ?></span>
        </div>
        <?php comments_template(); ?>
    </div>
</div>

<?php shop_zen_related_blog_posts(); ?>
</div>
</div>
</div>
</div>
<?php endif; ?>

<?php
get_footer();
