<?php
$slider_autoplay = rt_get_option('frontpage_image_slider_autoplay', false);
$slider_loop = rt_get_option('frontpage_image_slider_loop', false);
$sliders = rt_get_option('frontpage_image_slider_items');

// Swiper options
$slider_options = htmlspecialchars(json_encode([
    'slidesPerView' => 1,
    'spaceBetween' => 15,
    'loop' => $slider_loop,
    'autoplay' => [
        'delay' => ($slider_autoplay) ? 2500 : 999999999,
    ],
    'breakpoints' => [
        781 => [
            'slidesPerView' => 1,
            'spaceBetween' => 30,
        ],
    ],
]));

?>

<section id="frontpage-image-slider" class="frontpage-section has-global-padding">
    <div class="site-container">
        <div id="frontpage-image-slider" class="rt-swiper is-swiper-pagination-inside">

            <div class="swiper js-swiper" data-options="<?php echo esc_attr($slider_options) ?>" style="--slides: 1; --gap: 15px; --md--slides: 1; --md--gap: 30px;">

                <div class="swiper-wrapper">
                    <?php $index = 1; ?>
                    <?php foreach ($sliders  as $key => $slider) : ?>
                        <?php
                        $image = ($slider['image']) ? $slider['image'] : '';
                        $image_mobile = ($slider['image_mobile']) ? $slider['image_mobile'] : '';

                        $open_new_tab = ($slider['link_target']) ? '_blank' : '_self';
                        $link_target = ($slider['link_url']) ? $slider['link_url'] : '';

                        $image_alt = get_post_meta($image, '_wp_attachment_image_alt', true);
                        $lazy = ($index !== 1) ? 'lazy' : '';
                        ?>
                        <div class="swiper-slide" lazy="true">
                            <div class="rt-swiper-item">
                                <div class="rt-img text-center rounded-md">
                                    <?php if ($link_target): ?>
                                        <a href="<?php echo esc_url($link_target) ?>" target="<?php echo esc_attr($open_new_tab) ?>">
                                        <?php endif ?>

                                        <?php if ($image_mobile && rt_get_option('frontpage_image_slider_mobile', true)) : ?>
                                            <?php echo wp_get_attachment_image($image, 'full', '', ['loading' => $lazy, 'class' => 'hidden md:block']) ?>
                                            <?php echo wp_get_attachment_image($image_mobile, 'large', '', ['loading' => $lazy, 'class' => 'block md:hidden']) ?>
                                        <?php else: ?>
                                            <?php echo wp_get_attachment_image($image, 'full') ?>
                                        <?php endif ?>

                                        <?php if ($link_target): ?>
                                        </a>
                                    <?php endif ?>
                                </div>
                            </div>
                        </div>
                        <?php $index++; ?>
                    <?php endforeach ?>
                </div>

                <div class="swiper-pagination">
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                    <span class="swiper-pagination-bullet"></span>
                </div>

            </div>

            <div class="rt-swiper-navigation">
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>

        </div>
    </div>
</section>