{#
/**
 * Full-Width Slideshow Component
 *
 * A full-width slideshow/hero banner component using Swiper (via mtc-slider wrapper).
 * Optimized for single-slide display with optional fade effects.
 * Perfect for hero banners, main page sliders, and promotional content.
 *
 * @param {array} slides - Array of slide objects (image, title, description, link, etc.)
 * @param {object} options - Slideshow configuration options
 * @param {string} cssClass - Additional CSS classes for the slideshow wrapper
 * @param {string} slideTemplate - Twig template path for rendering each slide
 *
 * Example Usage:
 *
 * {% include 'includes/elements/slideshow.twig' with {
 *     slides: bannerSlides,
 *     cssClass: 'heroSlideshow',
 *     options: {
 *         arrows: true,
 *         pagination: true,
 *         autoplay: true,
 *         autoplaySpeed: 5000,
 *         speed: 800,
 *         fade: true,
 *         loop: true
 *     }
 * } %}
 *
 * Slide Object Structure:
 * {
 *     image: 'path/to/image.jpg',
 *     title: 'Slide Title',
 *     description: 'Slide description text',
 *     link: '/page-url',
 *     link_text: 'Learn More'
 * }
 */
#}

{# Dummy data for standalone testing/component registry #}
{% if slides is not defined %}
    {% set slides = [
        {
            image: '/sites/default/images/placeholders/default-hero.png',
            title: 'Welcome to Our Pharmacy',
            description: '<p>Professional healthcare services and medications delivered with care. Your health is our priority.</p>',
            link: '/about',
            link_text: 'Learn More'
        },
        {
            image: '/sites/default/images/placeholders/default-hero.png',
            title: 'Expert Prescription Services',
            description: '<p>Fast, reliable prescriptions from our qualified pharmacists. Order online or visit us in store.</p>',
            link: '/prescriptions',
            link_text: 'Get Started'
        },
        {
            image: '/sites/default/images/placeholders/default-hero.png',
            title: 'Health & Wellness Products',
            description: '<p>Browse our wide range of vitamins, supplements, and health products to support your wellbeing.</p>',
            link: '/shop',
            link_text: 'Shop Now'
        }
    ] %}
{% endif %}

{% set defaultOptions = {
    perPage: 1,
    gap: 0,
    arrows: true,
    pagination: true,
    speed: 800,
    rewind: false,
    destroy: false,
    perMove: 1,
    breakpoints: {
        640: {
            arrows: false
        }
    }
} %}

{% set slideshowOptions = defaultOptions|merge(options|default({})) %}
{% set slideshowClass = cssClass|default('genericSlideshow') %}

{# Convert options to JSON for Vue component #}
{% set optionsJson = slideshowOptions|json_encode %}

<div class="slideshowWrap {{ slideshowClass }}Wrap">

    <mtc-slider
        class="{{ slideshowClass }}"
        :options='{{ optionsJson }}'
    >

        {% if slides is defined and slides is iterable %}
            {% for slide in slides %}

                <mtc-slide class="{{ slideshowClass }}__slide">

                    {% if slideTemplate is defined %}
                        {# Render custom slide template if provided #}
                        {% include slideTemplate with { slide: slide } %}
                    {% else %}
                        {# Default slide rendering #}
                        <div class="{{ slideshowClass }}__content">

                            {% if slide.image is defined and slide.image is not empty %}
                                <div class="{{ slideshowClass }}__imageWrap">
                                    <img
                                        src="{{ slide.image }}"
                                        alt="{{ slide.title|default('Slide image') }}"
                                        class="{{ slideshowClass }}__image"
                                        loading="lazy"
                                    />
                                </div>
                            {% endif %}

                            {% if slide.title is defined or slide.description is defined or slide.link is defined %}
                                <div class="{{ slideshowClass }}__textContent">

                                    {% if slide.title is defined and slide.title is not empty %}
                                        <h2 class="{{ slideshowClass }}__title">
                                            {{ slide.title }}
                                        </h2>
                                    {% endif %}

                                    {% if slide.description is defined and slide.description is not empty %}
                                        <div class="{{ slideshowClass }}__description">
                                            {{ slide.description|raw }}
                                        </div>
                                    {% endif %}

                                    {% if slide.link is defined and slide.link is not empty %}
                                        <a
                                            href="{{ slide.link }}"
                                            class="{{ slideshowClass }}__link button"
                                        >
                                            {{ slide.link_text|default('Learn More') }}
                                        </a>
                                    {% endif %}

                                </div> <!-- .textContent -->
                            {% endif %}

                        </div> <!-- .content -->
                    {% endif %}

                </mtc-slide>

            {% endfor %}
        {% else %}
            {# Allow slot content via blocks #}
            {% block slideshow_slides %}
                {# Define slides here if not using slides array #}
            {% endblock %}
        {% endif %}

    </mtc-slider>

</div> <!-- .slideshowWrap -->
