<?php
/**
 * The template for displaying series archive pages
 */

get_header(); ?>

<div class="bg-light py-5 mb-5 border-bottom">
	<div class="container text-center">
		<span class="text-uppercase fw-bold text-primary small tracking-wide">Devotional Series</span>
		<h1 class="display-4 fw-bold mt-2 mb-3"><?php single_term_title(); ?></h1>
		<?php if (term_description()): ?>
			<div class="lead text-muted w-75 mx-auto"><?php echo term_description(); ?></div>
		<?php endif; ?>
	</div>
</div>

<div class="container mb-5">
	<main id="primary" class="site-main">
		<div class="row justify-content-center">
			<div class="col-lg-8">
				<?php
				if (have_posts()):
					$count = 1;
					while (have_posts()):
						the_post();
						?>
						<article id="post-<?php the_ID(); ?>" <?php post_class('card mb-4 border-0 shadow-sm'); ?>>
							<div class="row g-0 align-items-center">
								<div class="col-auto p-4 border-end d-none d-sm-flex align-items-center justify-content-center">
									<span
										class="fs-1 fw-bold text-black-50 opacity-25"><?php echo str_pad($count, 2, '0', STR_PAD_LEFT); ?></span>
								</div>
								<div class="col p-4">
									<header class="entry-header mb-2">
										<div class="d-flex justify-content-between align-items-baseline mb-2">
											<span
												class="badge bg-light text-dark text-uppercase small"><?php echo wisdom1_reading_time(); ?></span>
										</div>
										<?php the_title('<h3 class="card-title h4 fw-bold mb-0"><a href="' . esc_url(get_permalink()) . '" class="text-decoration-none text-dark stretched-link">', '</a></h3>'); ?>
									</header>
									<div class="card-text text-muted">
										<?php the_excerpt(); ?>
									</div>
								</div>
							</div>
						</article>
						<?php
						$count++;
					endwhile;

					// Basic pagination structure compatible with Bootstrap
					the_posts_navigation(array(
						'screen_reader_text' => 'Posts navigation',
						'prev_text' => '<span class="btn btn-outline-primary">&larr; Older Posts</span>',
						'next_text' => '<span class="btn btn-outline-primary">Newer Posts &rarr;</span>',
						'class' => 'd-flex justify-content-between my-5'
					));
				else:
					echo '<div class="alert alert-info text-center">' . esc_html__('No posts found in this series.', 'wisdom1') . '</div>';
				endif;
				?>
			</div>
		</div>
	</main>
</div>

<?php
get_footer();
