<?php

use Tangibledesign\MyHome\Widgets\BlogPost\RelatedBlogPostsCarouselWidget;

/* @var RelatedBlogPostsCarouselWidget $mhCurrentWidget */
global $mhCurrentWidget;
?>
<div class="myhome-app">
    <mh-post-carousel
            prefix="myhome"
            :swiper-config="<?php /** @noinspection JsonEncodingApiUsageInspection */
            echo htmlspecialchars(json_encode([
                'breakpoints' => [
                    0 => [
                        'slidesPerView' => 1,
                        'spaceBetween' => 15,
                    ],
                    768 => [
                        'slidesPerView' => 2,
                        'spaceBetween' => 15,
                    ],
                    1024 => [
                        'slidesPerView' => $mhCurrentWidget->getSlidesPerViewDesktop(),
                        'spaceBetween' => $mhCurrentWidget->getSpaceBetweenDesktop(),
                    ],
                    1280 => [
                        'slidesPerView' => $mhCurrentWidget->getSlidesPerViewDesktop(),
                        'spaceBetween' => $mhCurrentWidget->getSpaceBetweenDesktop(),
                    ],
                ],
            ])); ?>"
    >
        <div slot-scope="props" class="myhome-post-carousel">
            <div class="myhome-post-carousel__top">
                <div class="myhome-post-carousel__heading">
                    <div class="myhome-heading myhome-heading--left">
                        <?php if ($mhCurrentWidget->hasSmallHeading())  : ?>
                            <h3 class="myhome-heading__small-text">
                                <?php echo esc_html($mhCurrentWidget->getSmallHeading()); ?>
                            </h3>
                        <?php endif; ?>

                        <h2 class="myhome-heading__text">
                            <?php echo esc_html($mhCurrentWidget->getHeading()); ?>
                        </h2>
                    </div>
                </div>

                <div class="myhome-post-carousel__nav">
                    <div class="myhome-box-arrows">
                        <div
                                @click="props.prevSlide"
                                class="myhome-box-arrow"
                                :class="{'myhome-box-arrow--disabled': props.swiper.isBeginning}"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                                <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
                            </svg>
                        </div>

                        <div
                                @click="props.nextSlide"
                                class="myhome-box-arrow"
                                :class="{'myhome-box-arrow--disabled': props.swiper.isEnd}"
                        >
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                                <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                                <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <div class="myhome-post-carousel__content">
                <div class="myhome-swiper-container">
                    <div class="myhome-swiper-wrapper">
                        <?php
                        global $mhCurrentPost;
                        foreach ($mhCurrentWidget->getRelatedBlogPosts() as $mhCurrentPost) : ?>
                            <div class="myhome-swiper-slide">
                                <?php get_template_part('templates/partials/post_card_v5'); ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <div class="myhome-post-carousel__mobile-nav">
                <div class="myhome-box-arrows">
                    <div
                            @click="props.prevSlide"
                            class="myhome-box-arrow"
                            :class="{'myhome-box-arrow--disabled': props.swiper.isBeginning}"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
                        </svg>
                    </div>

                    <div
                            @click="props.nextSlide"
                            class="myhome-box-arrow"
                            :class="{'myhome-box-arrow--disabled': props.swiper.isEnd}"
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
                            <path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </mh-post-carousel>
</div>
