<?php
/**
 * Block Name: Recent Posts
 *
 * Display the latest posts in a three-column card layout.
 *
 * @package CWC
 */

namespace CWC;

$recent_posts = new \WP_Query(
	array(
		'ignore_sticky_posts' => true,
		'no_found_rows'       => true,
		'post_status'         => 'publish',
		'posts_per_page'      => 3,
	)
);

$posts_page_id = (int) get_option( 'page_for_posts' );
$blog_url      = $posts_page_id ? get_permalink( $posts_page_id ) : home_url( '/blog/' );
$classes       = 'recent-posts mx-break-out relative z-10 mt-0';

/**
 * NOTE: DO NOT remove this function call - it is required to avoid editor issues.
 * $is_preview is a WordPress global when in the editor.
 */
$wrapper = blockWrapperAttributes( $classes, $is_preview );
?>

<section <?php echo wp_kses_post( $wrapper ); ?>>
	<div class="recent-posts__background" aria-hidden="true">
		<img
			class="recent-posts__vector"
			src="<?php echo esc_url( get_stylesheet_directory_uri() . '/views/blocks/recent-posts/news-vector.svg' ); ?>"
			alt=""
			loading="lazy"
			role="presentation"
		/>
	</div>

	<div class="recent-posts__inner container px-0!">
		<header class="recent-posts__header">
			<h2 class="recent-posts__heading">
				<?php echo esc_html__( 'Latest Insights', 'cwc' ); ?><span aria-hidden="true">.</span>
			</h2>

			<div class="recent-posts__intro">
				<?php
				echo wp_kses_post( get_field( 'intro' ) ?? '' );
				?>
			</div>
		</header>

		<?php if ( $recent_posts->have_posts() ) : ?>
			<div class="recent-posts__grid">
				<?php
				$post_index = 0;
				while ( $recent_posts->have_posts() ) :
					$recent_posts->the_post();

					$post_title     = get_the_title();
					$post_permalink = get_permalink();
					$active_class   = 0 === $post_index ? ' is-active' : '';
					?>
					<article class="recent-posts__card<?php echo esc_attr( $active_class ); ?>">
						<?php /* translators: %s: Post title. */ ?>
						<a class="recent-posts__image-link" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
							<?php if ( has_post_thumbnail() ) : ?>
								<?php
								the_post_thumbnail(
									array( 397, 250 ),
									array(
										'class'   => 'recent-posts__image',
										'loading' => 'lazy',
									)
								);
								?>
							<?php else : ?>
								<span class="recent-posts__image recent-posts__image--placeholder" aria-hidden="true"></span>
							<?php endif; ?>
						</a>

						<div class="recent-posts__body">
							<h3 class="recent-posts__title">
                                <?php /* translators: %s: Post title. */ ?>
								<a href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>"><?php echo esc_html( $post_title ); ?></a>
							</h3>

							<div class="recent-posts__excerpt">
								<p><?php echo esc_html( wp_trim_words( get_the_excerpt(), 26 ) ); ?></p>
							</div>

                            <?php /* translators: %s: Post title. */ ?>
							<a class="recent-posts__read-more" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
								<?php echo esc_html__( 'Read More', 'cwc' ); ?>
							</a>
						</div>
					</article>
					<?php
					++$post_index;
				endwhile;
				?>

				<div class="recent-posts__controls">
					<button class="recent-posts__control recent-posts__control--previous" type="button" aria-label="<?php echo esc_attr__( 'Previous article', 'cwc' ); ?>">
						<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
							<path d="M15 5 8 12l7 7" />
						</svg>
					</button>
					<button class="recent-posts__control recent-posts__control--next" type="button" aria-label="<?php echo esc_attr__( 'Next article', 'cwc' ); ?>">
						<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
							<path d="m9 5 7 7-7 7" />
						</svg>
					</button>
				</div>
			</div>

			<div class="recent-posts__pagination" aria-label="<?php echo esc_attr__( 'Choose an article', 'cwc' ); ?>">
				<?php for ( $dot_index = 0; $dot_index < $recent_posts->post_count; ++$dot_index ) : ?>
					<button
						class="recent-posts__dot<?php echo 0 === $dot_index ? ' is-active' : ''; ?>"
						type="button"
						aria-label="<?php echo esc_attr( sprintf( /* translators: %d: Article number. */ __( 'Show article %d', 'cwc' ), $dot_index + 1 ) ); ?>"
						<?php echo 0 === $dot_index ? ' aria-current="true"' : ''; ?>
					></button>
				<?php endfor; ?>
			</div>

			<?php wp_reset_postdata(); ?>
		<?php endif; ?>

		<?php if ( $blog_url ) : ?>
			<div class="recent-posts__footer">
				<a class="recent-posts__blog-link button" href="<?php echo esc_url( $blog_url ); ?>" data-button-color="secondary" data-button-variant="outline">
					<?php echo esc_html__( 'View Blog', 'cwc' ); ?>
				</a>
			</div>
		<?php endif; ?>
	</div>
</section>
