<?php

/**
 * Template Name: Blog Listing
 *
 * Uses theme header.php / footer.php marketing chrome; styles in css/blog.css.
 *
 * @package ViitorX
 */

get_header();
?>

<main id="primary" class="site-main">
	<section class="hero-inner hero-blog" aria-label="<?php esc_attr_e('Blog hero', 'viitorx'); ?>">
		<?php get_template_part('template-parts/hero-wordmark'); ?>
		<video class="hero-inner__video" autoplay muted loop playsinline preload="metadata" fetchpriority="high" aria-hidden="true">
			<source src="<?php echo esc_url( get_template_directory_uri() . '/assets/videos/inner-page-hero-video.webm' ); ?>" type="video/webm">
		</video>
		<div class="hero-inner__overlay" aria-hidden="true"></div>
		<div class="container hero-inner__content" data-section-reveal>
			<nav class="hero-breadcrumb" aria-label="<?php esc_attr_e('Breadcrumb', 'viitorx'); ?>">
				<a href="<?php echo esc_url(home_url('/')); ?>"><?php esc_html_e('Home', 'viitorx'); ?></a>
				<span class="hero-breadcrumb__sep" aria-hidden="true">&gt;</span>
				<span class="hero-breadcrumb__current"><?php esc_html_e('Insights', 'viitorx'); ?></span>
			</nav>
			<h1 class="hero-inner__title"><?php esc_html_e('The Thinking Behind the Work', 'viitorx'); ?></h1>
			<p class="hero-inner__subtitle"><?php esc_html_e('Honest perspectives on experience design, technology, and what the best work actually requires.', 'viitorx'); ?></p>
		</div>
	</section>

	<section class="blog-listing" aria-label="<?php esc_attr_e('All Insights', 'viitorx'); ?>">
		<div class="blog-container blog-listing__inner">
			<div class="blog-listing__top">
				<h2 class="blog-listing__title"><?php esc_html_e('All Insights', 'viitorx'); ?></h2>

				<div class="search-blog search" role="search" aria-label="<?php esc_attr_e('Search blogs', 'viitorx'); ?>">
					<form id="blog-search-form" action="<?php echo esc_url(home_url('/')); ?>" method="get" class="search-blog__field search-blog__field--has-icon search__field">
						<span class="search-blog__icon" aria-hidden="true">
							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
								<circle cx="11" cy="11" r="7" />
								<path d="m21 21-4.35-4.35" />
							</svg>
						</span>
						<label class="sr-only" for="blog-search-input"><?php esc_html_e('Search', 'viitorx'); ?></label>
						<input id="blog-search-input" class="search-blog__input search__input" type="search" name="s" placeholder="<?php esc_attr_e('Search here', 'viitorx'); ?>" autocomplete="off" aria-label="<?php esc_attr_e('Search blogs', 'viitorx'); ?>" value="">
					</form>
				</div>
			</div>

			<div id="blog-grid" class="blog-grid" aria-live="polite" aria-busy="false" aria-label="<?php esc_attr_e('Blog list', 'viitorx'); ?>">
				<div id="blog-grid-results" class="blog-grid__results">
					<?php
					$paged      = get_query_var('paged') ? (int) get_query_var('paged') : 1;
					$page_var   = get_query_var('page') ? (int) get_query_var('page') : 1;
					if ($page_var > 1) {
						$paged = $page_var;
					}
					$blog_query = new WP_Query(
						array(
							'post_type'      => 'post',
							'posts_per_page' => 9,
							'paged'          => $paged,
						)
					);

					if ($blog_query->have_posts()) :
						while ($blog_query->have_posts()) :
							$blog_query->the_post();
							get_template_part('template-parts/blog', 'card');
						endwhile;
					else :
					?>
						<p class="blog-listing__empty"><?php esc_html_e('No posts found.', 'viitorx'); ?></p>
					<?php endif; ?>
				</div>
			</div>

			<div id="blog-pagination-wrap" class="blog-pagination-shell" <?php echo $blog_query->max_num_pages <= 1 ? ' hidden' : ''; ?>>
				<?php if ($blog_query->max_num_pages > 1) : ?>
					<nav class="blog-pagination" aria-label="<?php esc_attr_e('Posts pagination', 'viitorx'); ?>">
						<?php
						$listing_url = viitorx_get_page_url_by_template('template-blog-listing.php');
						$pag_args      = array(
							'total'     => $blog_query->max_num_pages,
							'current'   => $paged,
							'mid_size'  => 2,
							'prev_text' => __('&laquo; Previous', 'viitorx'),
							'next_text' => __('Next &raquo;', 'viitorx'),
							'type'      => 'list',
						);
						if ($listing_url && get_option('permalink_structure')) {
							$pag_args['base'] = user_trailingslashit(trailingslashit($listing_url) . 'page/%#%/');
						} elseif ($listing_url) {
							$pag_args['base'] = esc_url_raw(add_query_arg('page', '%#%', $listing_url));
						}
						echo paginate_links($pag_args);
						?>
					</nav>
				<?php endif; ?>
			</div>
			<?php wp_reset_postdata(); ?>
		</div>
	</section>

	<section class="cta-blog cta" aria-label="<?php esc_attr_e('Call to action', 'viitorx'); ?>">
		<div class="blog-container cta-blog__shell">
			<div class="cta-blog__inner cta__inner">
				<p class="cta-blog__text cta__text"><?php esc_html_e('Have something in mind? Let\'s design the experience.', 'viitorx'); ?></p>
				<a class="btn btn--primary" href="<?php echo esc_url(site_url('/contact-us')); ?>" aria-label="<?php esc_attr_e('Book a call', 'viitorx'); ?>"><?php esc_html_e('Book a Call', 'viitorx'); ?></a>
			</div>
		</div>
	</section>
</main>

<?php
get_footer();