<?php
$image_featured_size = 'large';
$image_featured_ratio = '3/2';
$image_thumbnail_size = 'trip_thumbnail';
$image_thumbnail_ratio = '1/1';
$get_images = get_post_meta(get_the_ID(), '_trip_image_gallery', true);
$images = !empty($get_images) ? explode(",", $get_images) : '';
?>

<div class="rt-swiper-gallery">

    <div id="trip_gallery_image_featured" class="rt-swiper rt-swiper-gallery__featured">
        <div class="swiper js-gallery-image-featured js-image-lightbox" style="--slides: 1; --gap: 30; --md--slides: 1; --md--gap: 30px;">
            <div class="swiper-wrapper">

                <?php if (has_post_thumbnail()): ?>

                    <?php $image_src = wp_get_attachment_image_src(get_post_thumbnail_id(), $image_featured_size);?>

                    <div class="swiper-slide">
                        <div class="rt-swiper-item">
                            <div class="main_featured_image rt-img is-img-full" style="<?php echo 'aspect-ratio:' . $image_featured_ratio; ?>">
                                <?php echo get_the_post_thumbnail(get_the_ID(), $image_featured_size) ?>
                            </div>
                        </div>
                    </div>
                <?php endif ?>

                <?php if ($images): ?>
                    <?php foreach ($images as $image): ?>
                        <?php $image_src = wp_get_attachment_image_src($image, $image_featured_size);?>

                        <div class="swiper-slide">
                            <div class="rt-swiper-item">
                                <div class="rt-img is-img-full" style="<?php echo 'aspect-ratio:' . $image_featured_ratio; ?>">
                                    <?php echo wp_get_attachment_image($image, $image_featured_size) ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach ?>
                <?php endif ?>

            </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>

    <div id="trip_gallery_image_thumbnails" class="rt-swiper has-active-marker rt-swiper-gallery__thumbnails" style="--slides: 5; --gap: 10px; --md--slides: 7; --md--gap: 10px;">
        <div class="swiper js-gallery-image-thumbnails" data-slides="5" data-slides-md="7" style="margin-top: 10px;">
            <div class="swiper-wrapper">

                <?php if (has_post_thumbnail()): ?>

                    <div class="swiper-slide">
                        <div class="rt-swiper-item">
                            <div class="main_thumbnail_image rt-img is-img-full"  style="<?php echo 'aspect-ratio:' . $image_thumbnail_ratio; ?>">
                                <?php echo get_the_post_thumbnail(get_the_ID(), $image_thumbnail_size) ?>
                            </div>
                        </div>
                    </div>
                <?php endif ?>

                <?php if ($images): ?>
                    <?php foreach ($images as $image): ?>
                        <div class="swiper-slide">
                            <div class="rt-swiper-item">
                                <div class="rt-img is-img-full" style="<?php echo 'aspect-ratio:' . $image_thumbnail_ratio; ?>">
                                    <?php echo wp_get_attachment_image($image, $image_thumbnail_size) ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach ?>
                <?php endif ?>

            </div>
        </div>

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

    </div>

</div>