<?php
/**
 * Tag Archive Template
 *
 * @package Peblog
 */

get_header(); ?>

<!-- main design start -->
<main id="main">
	<!-- Tag Archive Section -->
	<section id="filter-cateogries">
		<div class="page-header">
			<div class="page-title">
				<h1><?php single_tag_title( '' ); ?></h1>
				<?php if ( tag_description() ) : ?>
					<p><?php echo esc_html( wp_strip_all_tags( tag_description() ) ); ?></p>
				<?php else : ?>
					<p><?php esc_html_e( 'Discover the latest articles with this tag', 'peblog' ); ?></p>
				<?php endif; ?>
			</div>
			<div class="page-shape">
				<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/shape.svg" alt="" role="presentation">
			</div>
		</div>

		<div class="filter-posts-container">
			<?php if ( have_posts() ) : ?>
				<?php
				while ( have_posts() ) :
					the_post();
					$author     = get_the_author_meta( 'display_name' );
					$post_date  = get_the_date( 'd.m.Y' );
					$categories = get_the_category();
					?>
					<div class="filter-post" data-category="<?php echo esc_attr( get_the_category_list( ', ', '', get_the_ID() ) ); ?>">
						<?php if ( has_post_thumbnail() ) : ?>
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail( 'medium', array( 'class' => 'post-image' ) ); ?>
							</a>
						<?php else : ?>
							<div class="post-placeholder">
								<div class="placeholder-icon">
									<img src="<?php echo esc_url( peblog_get_placeholder_icon() ); ?>" alt="<?php esc_attr_e( 'Post', 'peblog' ); ?>" />
								</div>
							</div>
						<?php endif; ?>
						<div class="card-content">
							<ul class="entry-meta">
								<li class="post-author-image">
									<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>">
										<?php echo get_avatar( get_the_author_meta( 'ID' ), 32 ); ?>
									</a>
								</li>
								<li class="post-author"><a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>"><?php echo esc_html( $author ); ?></a></li>
								<li class="post-date"><span><?php echo esc_html( $post_date ); ?></span></li>
							</ul>
							<h4 class="entry-title"><?php the_title(); ?></h4>
							<div class="entry-expert">
								<p><?php echo esc_html( wp_trim_words( get_the_content(), 15, '...' ) ); ?></p>
							</div>
							<div class="entry-meta">
								<div class="entry-tag">
									<?php if ( $categories && ! empty( $categories ) ) : ?>
										<?php
										// Show only first category.
										$category = $categories[0];
										// Dynamic color classes.
										$color_classes = array( 'tag-main', 'tag-warning', 'tag-success', 'tag-danger', 'tag-info' );
										$color_index   = $category->term_id % count( $color_classes );
										$color_class   = $color_classes[ $color_index ];
										?>
										<a href="<?php echo esc_url( get_category_link( $category->term_id ) ); ?>" class="<?php echo esc_attr( $color_class ); ?>"><?php echo esc_html( $category->name ); ?></a>
									<?php endif; ?>
								</div>
								<?php if ( function_exists( 'pvc_get_post_views' ) ) : ?>
									<div class="entry-rate">
										<a href="<?php the_permalink(); ?>">
											<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/icon/eye.svg" alt="<?php esc_attr_e( 'Views', 'peblog' ); ?>">
											<?php echo esc_html( pvc_get_post_views( get_the_ID() ) ); ?>
										</a>
									</div>
								<?php endif; ?>
							</div>
						</div>
					</div>
				<?php endwhile; ?>
			<?php else : ?>
				<div class="no-posts-message">
					<div class="no-posts-icon">
						<img src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/icon/document.svg' ); ?>" alt="<?php esc_attr_e( 'No Posts', 'peblog' ); ?>" />
					</div>
					<h3><?php esc_html_e( 'No Posts Found', 'peblog' ); ?></h3>
					<p><?php esc_html_e( 'Sorry, no posts were found with this tag.', 'peblog' ); ?></p>
					<a href="<?php echo esc_url( home_url() ); ?>" class="btn btn-primary"><?php esc_html_e( 'Go Home', 'peblog' ); ?></a>
				</div>
			<?php endif; ?>
		</div>

		<!-- Pagination -->
		<?php if ( have_posts() ) : ?>
			<div class="pagination">
				<div class="pagination-container">
					<?php if ( get_previous_posts_link() ) : ?>
						<a href="<?php echo esc_url( get_pagenum_link( max( 1, get_query_var( 'paged' ) - 1 ) ) ); ?>" class="pagination-btn prev">
							<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/icon/prev.svg" alt="<?php esc_attr_e( 'Previous', 'peblog' ); ?>" />
							<span><?php esc_html_e( 'Previous', 'peblog' ); ?></span>
						</a>
					<?php endif; ?>
					
					<div class="pagination-numbers">
						<?php
						$current_page = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
						$max          = intval( $wp_query->max_num_pages );
						$page_links   = array();

						if ( $current_page >= 1 ) {
							$page_links[] = $current_page;
						}

						if ( $current_page >= 3 ) {
							$page_links[] = $current_page - 1;
							$page_links[] = $current_page - 2;
						}

						if ( ( $current_page + 2 ) <= $max ) {
							$page_links[] = $current_page + 2;
							$page_links[] = $current_page + 1;
						}

						if ( ! empty( $page_links ) ) {
							sort( $page_links );
							foreach ( $page_links as $page_link ) {
								if ( $page_link === $current_page ) {
									echo '<a href="#" class="active">' . esc_html( $page_link ) . '</a>';
								} else {
									echo '<a href="' . esc_url( get_pagenum_link( $page_link ) ) . '">' . esc_html( $page_link ) . '</a>';
								}
							}
						}
						?>
					</div>
					
					<?php if ( get_next_posts_link() ) : ?>
						<a href="<?php echo esc_url( get_pagenum_link( min( $max, get_query_var( 'paged' ) + 1 ) ) ); ?>" class="pagination-btn next">
							<span><?php esc_html_e( 'Next', 'peblog' ); ?></span>
							<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/icon/next.svg" alt="<?php esc_attr_e( 'Next', 'peblog' ); ?>" />
						</a>
					<?php endif; ?>
				</div>
			</div>
		<?php endif; ?>
	</section>
</main>
<!-- main design end -->

<?php get_footer(); ?>
