<?php

use Tangibledesign\MyHome\Widgets\General\TestimonialsV2Widget;

/* @var TestimonialsV2Widget $mhCurrentWidget */
global $mhCurrentWidget;
?>
<div class="myhome-app">
    <mh-testimonials-v2 prefix="myhome">
        <div slot-scope="props" class="myhome-testimonials-v2">
            <div class="myhome-testimonials-v2__content">
                <div class="myhome-testimonials-v2__heading">
                    <div class="myhome-heading myhome-heading--left">
                        <?php if (!empty($mhCurrentWidget->getSmallHeading())) : ?>
                            <h3 class="myhome-heading__small-text">
                                <?php echo esc_html($mhCurrentWidget->getSmallHeading()); ?>
                            </h3>
                        <?php endif; ?>

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

                <?php if (!empty($mhCurrentWidget->getText())) : ?>
                    <div class="myhome-testimonials-v2__text">
                        <?php echo nl2br(wp_kses_post($mhCurrentWidget->getText())); ?>
                    </div>
                <?php endif; ?>

                <div class="myhome-testimonials-v2__navigation myhome-box-arrows">
                    <div
                            @click.prevent="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.prevent="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 class="myhome-testimonials-v2__list">
                <div class="myhome-swiper-container">
                    <div class="myhome-swiper-wrapper">
                        <?php foreach ($mhCurrentWidget->getTestimonials() as $mhTestimonial): ?>
                            <div class="myhome-swiper-slide">
                                <?php
                                get_template_part(
                                    'templates/partials/testimonial_card',
                                    args: ['testimonial' => $mhTestimonial]
                                );
                                ?>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>

            <div class="myhome-testimonials-v2__mobile-navigation myhome-box-arrows">
                <div
                        @click.prevent="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.prevent="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>
    </mh-testimonials-v2>
</div>