<?php
if (! defined('ABSPATH')) {
    exit;
} ?>

<main class="puffergo-fullpage-layout">
	<div class="blog-detail-page mx-auto max-w-canvas px-4 sm:px-6 lg:px-8 py-12 sm:py-16">

		<?php puffergo_render_component('breadcrumb', array('items' => $data->get_breadcrumb_items())); ?>

		<header class="article-header">
			<div class="header-content">
				<h1 class="title"><?php echo esc_html($data->title); ?></h1>
				<?php if ('' !== $data->primary_term_name) : ?>
					<div class="meta">
						<span class="tag"><?php echo esc_html($data->primary_term_name); ?></span>
					</div>
				<?php endif; ?>
			</div>
			<?php if ('' !== $data->hero_image_url) : ?>
				<div class="hero-image">
					<img src="<?php echo esc_url($data->hero_image_url); ?>" alt="<?php echo esc_attr($data->hero_image_alt); ?>" />
				</div>
			<?php endif; ?>
		</header>

		<article class="article-content">
			<div class="content-container">
				<?php if ('' !== $data->quote_text) : ?>
					<blockquote class="article-quote">
						<?php echo esc_html($data->quote_text); ?>
					</blockquote>
				<?php endif; ?>

				<?php if ('' !== trim($data->raw_content)) : ?>
					<div class="introduction">
						<?php echo apply_filters('the_content', $data->raw_content); ?>
					</div>
				<?php endif; ?>
				<div class="divider no-bg"></div>
			</div>
		</article>

		<nav class="article-navigation">
			<?php if ($data->prev_post) : ?>
				<a href="<?php echo esc_url($data->prev_post['url']); ?>" class="nav-card">
					<div class="card-content">
						<?php if (! empty($data->prev_post['term_name'])) : ?>
							<div class="tag"><?php echo esc_html($data->prev_post['term_name']); ?></div>
						<?php endif; ?>
						<h3 class="title"><?php echo esc_html($data->prev_post['title']); ?></h3>
					</div>
					<div class="nav-button"><?php esc_html_e('Previous', 'puffergo'); ?></div>
				</a>
			<?php else : ?>
				<div class="nav-card disabled">
					<div class="card-content"><h3 class="title"><?php esc_html_e('No previous post', 'puffergo'); ?></h3></div>
					<div class="nav-button disabled-btn"><?php esc_html_e('Previous', 'puffergo'); ?></div>
				</div>
			<?php endif; ?>

			<?php if ($data->next_post) : ?>
				<a href="<?php echo esc_url($data->next_post['url']); ?>" class="nav-card">
					<div class="card-content">
						<?php if (! empty($data->next_post['term_name'])) : ?>
							<div class="tag"><?php echo esc_html($data->next_post['term_name']); ?></div>
						<?php endif; ?>
						<h3 class="title"><?php echo esc_html($data->next_post['title']); ?></h3>
					</div>
					<div class="nav-button"><?php esc_html_e('Next', 'puffergo'); ?></div>
				</a>
			<?php else : ?>
				<div class="nav-card disabled">
					<div class="card-content"><h3 class="title"><?php esc_html_e('No next post', 'puffergo'); ?></h3></div>
					<div class="nav-button disabled-btn"><?php esc_html_e('Next', 'puffergo'); ?></div>
				</div>
			<?php endif; ?>
		</nav>
		<div class="divider"></div>

		<?php if (! empty($data->related_posts)) : ?>
			<section class="related-articles">
				<div class="container">
					<h2 class="title"><?php esc_html_e('Related', 'puffergo'); ?></h2>
					<div class="articles-grid">
						<?php foreach ($data->related_posts as $related) : ?>
							<a href="<?php echo esc_url($related['url']); ?>" class="article-card">
								<?php if (! empty($related['image_url'])) : ?>
									<div class="article-image">
										<img src="<?php echo esc_url($related['image_url']); ?>" alt="<?php echo esc_attr($related['image_alt']); ?>" />
									</div>
								<?php endif; ?>
								<div class="article-content">
									<h3 class="article-title"><?php echo esc_html($related['title']); ?></h3>
								</div>
								<?php if (! empty($related['term_name'])) : ?>
									<div class="article-meta">
										<div class="tag"><?php echo esc_html($related['term_name']); ?></div>
									</div>
								<?php endif; ?>
							</a>
						<?php endforeach; ?>
					</div>
				</div>
			</section>
		<?php endif; ?>
	</div>
</main>
