<?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-3856fabd"
		aria-labelledby="recommended-posts-title"
		data-section-mode="readonly" data-component-trigger="e40ca98049c7" data-module-priority="high" data-analytics-track="ee58fd7d" data-mui-focus="83cc71e001b3"
	>
		<div class="g-fdc4b4e9" id="elem-6f542964cebc9a50">
			<div class="g-fb07611a" data-widget-layout="4a75f60" data-bs-ride="0116741ff" data-mui-locator="12cd117d9a2f" data-analytics-selector="7fb5ef6a07">
				<h2
					id="recommended-posts-title"
					class="g-f86e9679 g-e073ab23"
				>
				You may also like
				</h2>
			</div>
			<div class="swiper g-e2e5d8d2 g-577873a7" id="elem-5d16965f8b63e67c">
				<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 class="g-9f34db1e" data-analytics-source="5741981b749" data-bs-unit="7bfa8243a" data-bs-cy="c3d113c" data-widget-theme="auto">
					<div class="g-3f93577e" id="elem-8a2a56d6abfab2bc">
						<button
							class="g-a6993f0c g-0b8c6e92"
							type="button"
							aria-label="<?php esc_attr_e( 'Previous posts', 'theme' ); ?>"
						>
							<svg class="g-4c62d1ea" width="18" height="12" viewBox="0 0 18 12"
							     xmlns="http://www.w3.org/2000/svg">
								<path
									d="M6.05371 10.8272C5.76082 11.1201 5.28508 11.1201 4.99219 10.8272L0.219727 6.05377C-0.0731659 5.76087 -0.0731659 5.28611 0.219727 4.99322L4.99219 0.219783C5.28508 -0.0731106 5.76082 -0.0731106 6.05371 0.219783C6.3466 0.512676 6.3466 0.988413 6.05371 1.28131L2.56055 4.77349H16.75C17.1642 4.77349 17.5 5.10928 17.5 5.52349C17.5 5.93771 17.1642 6.27349 16.75 6.27349H2.56055L6.05371 9.76568C6.3466 10.0586 6.3466 10.5343 6.05371 10.8272Z"/>
							</svg>
						</button>
						<button
							class="g-a6993f0c g-cdd511a5"
							type="button"
							aria-label="<?php esc_attr_e( 'Next posts', 'theme' ); ?>"
						>
							<svg class="g-4c62d1ea" width="18" height="12" viewBox="0 0 18 12"
							     xmlns="http://www.w3.org/2000/svg">
								<path
									d="M11.4463 10.8272C11.7392 11.1201 12.2149 11.1201 12.5078 10.8272L17.2803 6.05377C17.5732 5.76087 17.5732 5.28611 17.2803 4.99322L12.5078 0.219783C12.2149 -0.0731106 11.7392 -0.0731106 11.4463 0.219783C11.1534 0.512676 11.1534 0.988413 11.4463 1.28131L14.9395 4.77349H0.75C0.335786 4.77349 0 5.10928 0 5.52349C0 5.93771 0.335786 6.27349 0.75 6.27349H14.9395L11.4463 9.76568C11.1534 10.0586 11.1534 10.5343 11.4463 10.8272Z"/>
							</svg>
						</button>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script>
        document.addEventListener('DOMContentLoaded', () => {

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

            if (!slider) {
                return;
            }

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