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

get_header();
?>

<!-- Reading Progress Bar -->
<div class="reading-progress" id="readingProgress" aria-hidden="true"><span></span></div>

<main id="main-content" class="single-post-wrap">

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

	/* Data for the single post */
	$reading_time    = function_exists( 'pawwell_estimated_reading_time' ) ? pawwell_estimated_reading_time( get_the_content() ) : 5;
	$author_id       = get_the_author_meta( 'ID' );
	$author_name     = get_the_author_meta( 'display_name' );
	$author_bio      = get_the_author_meta( 'description' );
	$author_initial  = $author_name ? strtoupper( substr( $author_name, 0, 1 ) ) : 'P';
	$categories      = get_the_category();
	$primary_cat     = ! empty( $categories ) ? $categories[0] : null;
	$post_tags       = get_the_tags();
	$blog_page_id    = get_option( 'page_for_posts' );
	$blog_url        = $blog_page_id ? get_permalink( $blog_page_id ) : home_url( '/' );
	$prev_post       = get_previous_post();
	$next_post       = get_next_post();
	$excerpt         = has_excerpt() ? get_the_excerpt() : wp_strip_all_tags( get_the_content() );
	$short_excerpt   = $excerpt ? wp_trim_words( $excerpt, 32, '&hellip;' ) : '';
	$share_url       = rawurlencode( get_permalink() );
	$share_title     = rawurlencode( get_the_title() );
?>

<!-- ============ ARTICLE HERO ============ -->
<section class="article-hero">
	<span class="article-hero-blob ahb-1" aria-hidden="true"></span>
	<span class="article-hero-blob ahb-2" aria-hidden="true"></span>
	<div class="container">
		<?php if ( pawwell_breadcrumb_is_enabled() ) : ?>
		<nav class="ah-crumb fade-in" aria-label="<?php esc_attr_e( 'Breadcrumb', 'pawwell' ); ?>">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 4l9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg>
				<?php esc_html_e( 'Home', 'pawwell' ); ?>
			</a>
			<svg class="sep" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
			<a href="<?php echo esc_url( $blog_url ); ?>"><?php esc_html_e( 'Blog', 'pawwell' ); ?></a>
			<?php if ( $primary_cat ) : ?>
			<svg class="sep" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
			<a href="<?php echo esc_url( get_category_link( $primary_cat->term_id ) ); ?>"><?php echo esc_html( $primary_cat->name ); ?></a>
			<?php endif; ?>
			<svg class="sep" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
			<span class="current"><?php echo esc_html( wp_trim_words( get_the_title(), 8, '&hellip;' ) ); ?></span>
		</nav>
		<?php endif; ?>

		<div class="fade-in">
			<?php if ( $primary_cat ) : ?>
			<span class="ah-cat">
				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7a2 2 0 0 1 2-2h3.2a2 2 0 0 1 1.4.6l7.8 7.8a2 2 0 0 1 0 2.8l-3.2 3.2a2 2 0 0 1-2.8 0L4.6 11.6A2 2 0 0 1 4 10.2z"/><circle cx="8.5" cy="8.5" r="1.2" fill="currentColor" stroke="none"/></svg>
				<?php echo esc_html( $primary_cat->name ); ?>
			</span>
			<?php endif; ?>

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

			<?php if ( $short_excerpt ) : ?>
			<p class="ah-excerpt"><?php echo esc_html( $short_excerpt ); ?></p>
			<?php endif; ?>

			<div class="ah-meta">
				<div class="ah-author">
					<span class="ah-avatar" data-initial="<?php echo esc_attr( $author_initial ); ?>">
						<?php echo get_avatar( $author_id, 50, '', $author_name, array( 'class' => 'ah-avatar-img' ) ); ?>
					</span>
					<span class="ah-author-info">
						<span class="ah-name"><?php echo esc_html( $author_name ); ?></span>
						<span class="ah-role"><?php esc_html_e( 'Author', 'pawwell' ); ?></span>
					</span>
				</div>
				<span class="ah-dot" aria-hidden="true"></span>
				<span class="ah-meta-item">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>
					<?php echo esc_html( get_the_date() ); ?>
				</span>
				<span class="ah-dot" aria-hidden="true"></span>
				<span class="ah-meta-item">
					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
					<?php echo esc_html( $reading_time ); ?> <?php esc_html_e( 'min read', 'pawwell' ); ?>
				</span>
			</div>
		</div>
	</div>
</section>

<!-- ============ FEATURED IMAGE ============ -->
<?php if ( has_post_thumbnail() ) : ?>
<div class="article-feature-img fade-in">
	<div class="afi-inner">
		<?php the_post_thumbnail( 'full', array( 'alt' => the_title_attribute( array( 'echo' => false ) ) ) ); ?>
	</div>
</div>
<?php endif; ?>

<!-- ============ ARTICLE LAYOUT ============ -->
<div class="container">
	<div class="article-layout">

		<!-- ===== ARTICLE BODY ===== -->
		<article class="article-body" id="articleBody">

			<div class="article-content">
				<?php
				the_content();

				wp_link_pages( array(
					'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'pawwell' ),
					'after'  => '</div>',
				) );
				?>
			</div>

			<!-- Tags + share -->
			<div class="article-foot">
				<?php if ( $post_tags ) : ?>
				<div class="tag-row">
					<span class="tag-label"><?php esc_html_e( 'Topics', 'pawwell' ); ?></span>
					<?php foreach ( $post_tags as $tag ) : ?>
						<a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>" class="tag"><?php echo esc_html( $tag->name ); ?></a>
					<?php endforeach; ?>
				</div>
				<?php endif; ?>

				<div class="share-row">
					<span class="share-label"><?php esc_html_e( 'Share', 'pawwell' ); ?></span>
					<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo esc_attr( $share_url ); ?>" class="share-btn" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on Facebook', 'pawwell' ); ?>">
						<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 9h3l.5-3H14V4.5c0-.8.3-1.5 1.5-1.5H17V.5C16.5.4 15.4 0 14.3 0 11.8 0 10 1.5 10 4.2V6H7v3h3v9h4V9z"/></svg>
					</a>
				<a href="https://twitter.com/intent/tweet?url=<?php echo esc_attr( $share_url ); ?>&amp;text=<?php echo esc_attr( $share_title ); ?>" class="share-btn" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on X', 'pawwell' ); ?>">
					<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><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.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z"/></svg>
				</a>
					<a href="https://pinterest.com/pin/create/button/?url=<?php echo esc_attr( $share_url ); ?>&amp;description=<?php echo esc_attr( $share_title ); ?>" class="share-btn" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Share on Pinterest', 'pawwell' ); ?>">
						<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2a10 10 0 0 0-3.6 19.3c-.1-.8-.2-2 0-2.9l1.2-5s-.3-.6-.3-1.5c0-1.4.8-2.5 1.9-2.5.9 0 1.3.7 1.3 1.5 0 .9-.6 2.2-.9 3.5-.2 1 .5 1.9 1.6 1.9 1.9 0 3.2-2.4 3.2-5.3 0-2.2-1.5-3.8-4.1-3.8-3 0-4.8 2.2-4.8 4.7 0 .9.3 1.5.7 2 .2.2.2.3.1.5l-.2.9c-.1.3-.3.4-.6.2-1.3-.5-1.9-2-1.9-3.6 0-2.7 2.3-5.9 6.7-5.9 3.6 0 5.9 2.6 5.9 5.3 0 3.6-2 6.4-5 6.4-1 0-2-.5-2.3-1.1l-.6 2.4c-.2.8-.7 1.7-1 2.4A10 10 0 1 0 12 2z"/></svg>
					</a>
					<button type="button" class="share-btn" id="copyLink" aria-label="<?php esc_attr_e( 'Copy link', 'pawwell' ); ?>" data-permalink="<?php echo esc_attr( get_permalink() ); ?>">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.66 0l3-3a4 4 0 0 0-5.66-5.66l-1 1"/><path d="M14 10a4 4 0 0 0-5.66 0l-3 3a4 4 0 0 0 5.66 5.66l1-1"/></svg>
					</button>
				</div>
			</div>

			<!-- Author box -->
			<?php if ( $author_name ) : ?>
			<div class="author-box">
				<span class="author-box-avatar">
					<?php echo get_avatar( $author_id, 88, '', $author_name, array( 'class' => 'author-box-avatar-img' ) ); ?>
				</span>
				<div class="author-box-content">
					<span class="author-box-eyebrow"><?php esc_html_e( 'Written by', 'pawwell' ); ?></span>
					<h4><?php echo esc_html( $author_name ); ?></h4>
					<?php if ( $author_bio ) : ?>
					<p><?php echo esc_html( wp_trim_words( $author_bio, 40, '&hellip;' ) ); ?></p>
					<?php endif; ?>
					<a href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>" class="author-box-link">
						<?php esc_html_e( 'View all posts', 'pawwell' ); ?>
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg>
					</a>
				</div>
			</div>
			<?php endif; ?>

			<!-- Prev / Next -->
			<?php if ( $prev_post || $next_post ) : ?>
			<nav class="post-nav" aria-label="<?php esc_attr_e( 'Post navigation', 'pawwell' ); ?>">
				<?php if ( $prev_post ) : ?>
				<a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>" class="post-nav-card prev">
					<span class="pn-ic">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6 6-6-6 6-6"/></svg>
					</span>
					<span class="pn-text">
						<span class="pn-label"><?php esc_html_e( 'Previous', 'pawwell' ); ?></span>
						<span class="pn-title"><?php echo esc_html( wp_trim_words( get_the_title( $prev_post ), 10, '&hellip;' ) ); ?></span>
					</span>
				</a>
				<?php else : ?>
				<span class="post-nav-card placeholder" aria-hidden="true"></span>
				<?php endif; ?>

				<?php if ( $next_post ) : ?>
				<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>" class="post-nav-card next">
					<span class="pn-text">
						<span class="pn-label"><?php esc_html_e( 'Next', 'pawwell' ); ?></span>
						<span class="pn-title"><?php echo esc_html( wp_trim_words( get_the_title( $next_post ), 10, '&hellip;' ) ); ?></span>
					</span>
					<span class="pn-ic">
						<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"/></svg>
					</span>
				</a>
				<?php endif; ?>
			</nav>
			<?php endif; ?>

			<!-- Comments -->
			<?php if ( comments_open() || get_comments_number() ) : ?>
			<section class="comments-section">
				<div class="comments-head">
					<h3><?php esc_html_e( 'Discussion', 'pawwell' ); ?>
						<span class="count-badge"><?php echo esc_html( get_comments_number() ); ?> <?php esc_html_e( 'comments', 'pawwell' ); ?></span>
					</h3>
				</div>
				<?php comments_template(); ?>
			</section>
			<?php endif; ?>

		</article>

		<!-- ===== SIDEBAR ===== -->
		<aside class="article-sidebar">
			<?php get_template_part( 'template-parts/blog/single', 'sidebar' ); ?>
		</aside>

	</div>
</div>

<?php
endwhile;
?>

<!-- ============ RELATED ARTICLES ============ -->
<?php pawwell_related_blog_posts(); ?>

</main>

<?php
get_footer();
