<?php

	if ( ! defined( 'ABSPATH' ) ) {
		exit;
	}

	$current_post_id = get_the_ID();

	/**
	 * Current post categories
	 */
	$categories   = get_the_category( $current_post_id );
	$category_ids = [];

	if ( ! empty( $categories ) ) {
		$category_ids = wp_list_pluck(
			$categories,
			'term_id'
		);
	}

	/**
	 * Base query args
	 */
	$query_args = [
		'post_type'      => 'post',
		'post_status'    => 'publish',
		'posts_per_page' => 5,
		'post__not_in'   => [ $current_post_id ],
		'orderby'        => 'rand',
	];

	/**
	 * If categories exist —
	 * prioritize same category posts
	 */
	if ( ! empty( $category_ids ) ) {
		$query_args['category__in'] = $category_ids;
	}

	$recommended_posts = get_posts( $query_args );

	/**
	 * If not enough posts found —
	 * fill with random posts
	 */
	if ( count( $recommended_posts ) < 5 ) {
		$existing_ids      = wp_list_pluck(
			$recommended_posts,
			'ID'
		);
		$existing_ids[]    = $current_post_id;
		$additional_posts  = get_posts(
			[
				'post_type'      => 'post',
				'post_status'    => 'publish',
				'posts_per_page' => 5 - count( $recommended_posts ),
				'post__not_in'   => $existing_ids,
				'orderby'        => 'rand',
			]
		);
		$recommended_posts = array_merge(
			$recommended_posts,
			$additional_posts
		);
	}

?>
<?php if ( ! empty( $recommended_posts ) ) : ?>
	<section
		class="g-89f36b42"
		aria-labelledby="recommended-posts-title"
		data-block-position="bottom" data-mui-goal="f227e6f48c"
	>
		<div class="g-b24e2866" id="elem-7d597a57d499b9bf">
			<div class="g-ba47686d" data-component-trigger="f8e3a52f04" data-analytics-testid="c01ec1fc">
				<h2
					id="recommended-posts-title"
					class="g-caf4269a g-5e158376"
				>
				You may also like
				</h2>
			</div>
			<div class="g-1b951309" id="elem-a1dad77e680c0e33">
				<div class="swiper g-f3b3e3be g-b63ed716" data-widget-config="67d806918c" data-module-type="button">
					<div class="swiper-wrapper">
						<?php
							foreach ( $recommended_posts as $post ) :
								setup_postdata( $post );
								?>
								<div class="swiper-slide">
									<?php
										get_template_part(
											'templates/post-card',
											null,
										);
									?>
								</div>
							<?php
							endforeach;
							wp_reset_postdata();
						?>
					</div>
				</div>
				<div class="g-2417d86e" data-section-trigger="581acd" data-block-action="hover" data-block-theme="light">
					<button
						class="g-5ae70fc5 g-6c83e5dc"
						type="button"
						aria-label="<?php esc_attr_e( 'Previous posts', 'theme' ); ?>"
					>
						<svg width="9" height="15" viewBox="0 0 9 15" fill="none"
						     xmlns="http://www.w3.org/2000/svg">
							<path
								d="M8.07054 0.292745C7.68011 -0.0976805 7.04702 -0.0974827 6.65647 0.292745L0.292216 6.657C-0.098308 7.04753 -0.098308 7.68054 0.292216 8.07106L6.65647 14.4353C7.04702 14.8256 7.68011 14.8257 8.07054 14.4353C8.46096 14.0449 8.46076 13.4118 8.07054 13.0213L2.41331 7.36403L8.07054 1.70681C8.46076 1.31626 8.46096 0.68317 8.07054 0.292745Z"
								fill="var(--color-text-light)"/>
						</svg>
					</button>
					<button
						class="g-5ae70fc5 g-6a976ce8"
						type="button"
						aria-label="<?php esc_attr_e( 'Next posts', 'theme' ); ?>"
					>
						<svg width="9" height="15" viewBox="0 0 9 15" fill="none"
						     xmlns="http://www.w3.org/2000/svg">
							<path
								d="M0.292745 0.292745C0.68317 -0.0976805 1.31626 -0.0974827 1.70681 0.292745L8.07106 6.657C8.46159 7.04753 8.46159 7.68054 8.07106 8.07106L1.70681 14.4353C1.31626 14.8256 0.68317 14.8257 0.292745 14.4353C-0.0976805 14.0449 -0.0974827 13.4118 0.292745 13.0213L5.94997 7.36403L0.292745 1.70681C-0.0974827 1.31626 -0.0976805 0.68317 0.292745 0.292745Z"
								fill="var(--color-text-light)"/>
						</svg>
					</button>
				</div>
			</div>
		</div>
	</section>
	<script>
        document.addEventListener('DOMContentLoaded', () => {

            const sliderWrapper = document.querySelector(
                '.g-1b951309'
            );

            const slider = document.querySelector(
                '.g-f3b3e3be'
            );

            if (!slider || !sliderWrapper) {
                return;
            }

            new Swiper(slider, {
                loop: true,
                speed: 700,
                slidesPerView: 3,
                spaceBetween: 24,
                grabCursor: true,
                navigation: {
                    nextEl: sliderWrapper.querySelector(
                        '.g-6a976ce8'
                    ),
                    prevEl: sliderWrapper.querySelector(
                        '.g-6c83e5dc'
                    ),
                },
                breakpoints: {
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 24,
                    },
                    768: {
                        slidesPerView: 2.3,
                        spaceBetween: 16,
                    },
                    0: {
                        slidesPerView: 1.3,
                        spaceBetween: 16,
                    },
                },
            });
        });
	</script>
<?php endif; ?>