{% if show_dummy_data == true %}
    {% set service_page = {
        'pagedata': {
            'Services': [
                {
                    'Service Name': {'value': 'Prescription Services'},
                    'Service Image': {'value': 'no-image.jpg'},
                    'Service Description': {'value': '<p>Professional prescription dispensing and medication management services for all your healthcare needs.</p>'}
                },
                {
                    'Service Name': {'value': 'Health Consultations'},
                    'Service Image': {'value': 'no-image.jpg'},
                    'Service Description': {'value': '<p>Expert health consultations and advice from qualified pharmacists and healthcare professionals.</p>'}
                },
                {
                    'Service Name': {'value': 'Medication Reviews'},
                    'Service Image': {'value': 'no-image.jpg'},
                    'Service Description': {'value': '<p>Comprehensive medication reviews to ensure optimal therapeutic outcomes and safety.</p>'}
                }
            ]
        }
    } %}
    {% set image_folders = {
        'cms_images': {
            'services_icons': {
                'path': 'sites/default/images/placeholders/'
            }
        }
    } %}
{% endif %}

{% set services = service_page.pagedata['Services'] %}

{% set serviceSlider = "{
        destroy: true,
        pagination: false,
        rewind: false,
        arrows: false,
        speed: 1500,
        perMove: 1,
        perPage: 3,
        breakpoints: {
            900: {
                perPage: 1,
                pagination: true,
                destroy: false
            }
        }
}"
%}

{% if services[0]['Service Name']['value'] is not empty or services[0]['Service Image']['value'] is not empty or services[0]['Service Description']['value'] is not empty %}

    <div class="serviceListOuterWrap">

        <mtc-slider
                class="serviceList swiperWhiteButtons"
                :options="{{ serviceSlider }}"
        >

            {% for service in services %}


                <mtc-slide class="serviceList__item">

                    <div class="serviceList__inner">

                        <div class="serviceList__imageWrap">

                            {% if service['Service Image']['value'] is not empty %}
                                <img
                                        src="{{ settings.STATIC_URL }}/{{ image_folders['cms_images']['services_icons']['path'] }}/{{ service['Service Image']['value']  }}"
                                        loading="lazy"
                                        alt="{{ service['Service Name']['value'] }}"
                                        width="140"
                                        height="140"
                                        class="serviceList__image"
                                />
                            {% endif %}

                        </div> <!-- .imageWrap -->

                        <div class="serviceList__info">

                            <h2 class="serviceList__title">

                                <span class="serviceTitleText">
                                    {{ service['Service Name']['value'] }}
                                </span>

                            </h2>

                            <div class="serviceList__description">
                                {{ service['Service Description']['value']|raw }}
                            </div> <!-- .serviceList__description -->


                        </div><!-- .serviceList__info -->

                    </div> <!-- .serviceList__inner -->

                </mtc-slide>

            {% endfor %}

        </mtc-slider>

    </div> <!-- .serviceListOuterWrap -->

{% endif %}
