<?php

use Tangibledesign\MyHome\Widgets\General\PostCarouselWidget;

/* @var PostCarouselWidget $mhCurrentWidget */
global $mhCurrentWidget;
?>
<div class="myhome-app">
    <mh-post-carousel prefix="myhome">
        <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">
                        <button
                                @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>
                        </button>

                        <button
                                @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>
                        </button>
                    </div>

                    <div class="myhome-post-carousel__button">
                        <a
                            <?php if ($mhCurrentWidget->isPrimary1ButtonType()) : ?>
                                class="myhome-button myhome-button--primary-1"
                            <?php else : ?>
                                class="myhome-button myhome-button--primary-2"
                            <?php endif; ?>
                                href="<?php echo esc_url(get_post_type_archive_link('post')); ?>"
                                title="<?php echo esc_attr($mhCurrentWidget->getHeading()); ?>"
                        >
                            <span>
                                <?php echo esc_html(tdf_string('view_all')); ?>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="myhome-post-carousel__content">
                <div class="myhome-swiper-container">
                    <div class="myhome-swiper-wrapper">
                        <?php
                        global $mhCurrentPost;
                        foreach ($mhCurrentWidget->getPosts() 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>
