{% 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 %}
