

{% if categories is not empty %}

    {% set gridSliderOptions = "{
            destroy: true,
            pagination: true,
            rewind: false,
            arrows: false,
            speed: 1500,
            perMove: 1
    }" %}

    {% set gridSliderOptionsSmall = "{
            destroy: true,
            pagination: false,
            rewind: false,
            arrows: true,
            speed: 1500,
            perMove: 1,
            perPage: 4,
            breakpoints: {
                1120: {
                    perPage: 3
                },
                720: {
                    perPage: 2
                },
                450: {
                    perPage: 1
                }
            }
    }"
    %}

    <section class="categoryCTAWrap {{ class }}">

        <div class="wrapper">

            {% if list_all is empty %}
                {% include 'includes/elements/intro_block.twig' with {
                    intro_title: 'What we treat',
                    intro_content: '<p>Select from the conditions below, next we’ll ask you some quick questions and make a customised recommendation based on your information</p>',
                    class: ''
                }%}


                <mtc-slider
                        class="categoryCTAWrap__list desktop"
                        :options="{{ gridSliderOptions }}"
                >

                    {% for group in categories %}

                        <mtc-slide>

                            <div class="categoryGrid">

                                {% for category in group %}

                                    {% if category.url is not empty and category.name is not empty %}

                                        <div class="categoryGrid__item">

                                            <a
                                                    href="{{ category.url }}"
                                                    title="{{ category.url }}"
                                                    class="categoryCard"
                                            >


                                                <div class="categoryCard__imageBox">

                                                    <div class="categoryCard__imageWrap">


                                                        {% if category.image is not empty %}

                                                            <img
                                                                    src="/{{ image_folders['category_images']['category_icon']['path'] }}/{{ category.image }}"
                                                                    alt="{{ category.name }}"
                                                                    width="219"
                                                                    height="219"
                                                                    loading="lazy"
                                                            >
                                                        {% else %}
                                                            <img
                                                                    src="/sites/default/images/placeholders/default-hero.png"
                                                                    alt="{{ category.name }}"
                                                                    width="219"
                                                                    height="219"
                                                                    loading="lazy"
                                                            >
                                                        {% endif %}

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

                                                </div> <!-- .categoryCTAWrap__imageBox -->

                                                <div class="categoryCard__text">
                                                    {{ category.name }}
                                                </div>

                                            </a>

                                        </div>

                                    {% endif %}

                                {% endfor %}

                            </div>

                        </mtc-slide>
                    {% endfor %}

                </mtc-slider>

                <mtc-slider
                        class="categoryCTAWrap__list smallScreens"
                        :options="{{ gridSliderOptionsSmall }}"
                >

                    {% for group in categories %}

                    {% for category in group %}
                        <mtc-slide>

                            {% if category.url is not empty and category.name is not empty %}

                                <div class="categoryGrid__item">

                                    <a
                                            href="{{ category.url }}"
                                            title="{{ category.url }}"
                                            class="categoryCard"
                                    >


                                        <div class="categoryCard__imageBox">

                                            <div class="categoryCard__imageWrap">


                                                {% if category.image is not empty %}

                                                    <img
                                                            src="/{{ image_folders['category_images']['category_icon']['path'] }}/{{ category.image }}"
                                                            alt="{{ category.name }}"
                                                            width="219"
                                                            height="219"
                                                            loading="lazy"
                                                    >
                                                {% else %}
                                                    <img
                                                            src="/sites/default/images/placeholders/default-hero.png"
                                                            alt="{{ category.name }}"
                                                            width="219"
                                                            height="219"
                                                            loading="lazy"
                                                    >
                                                {% endif %}

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

                                        </div> <!-- .categoryCTAWrap__imageBox -->

                                        <div class="categoryCard__text">
                                            {{ category.name }}
                                        </div>

                                    </a>

                                </div>

                            {% endif %}

                        </mtc-slide>
                    {% endfor %}
                    {% endfor %}

                </mtc-slider>

            {% else %}
                <div class="categoryGrid">

                    {% for group in categories %}
                        {% for category in group %}

                            {% if category.url is not empty and category.name is not empty %}

                                <div class="categoryGrid__item">

                                    <a
                                            href="{{ category.url }}"
                                            title="{{ category.url }}"
                                            class="categoryCard"
                                    >


                                        <div class="categoryCard__imageBox">

                                            <div class="categoryCard__imageWrap">


                                                {% if category.image is not empty %}

                                                    <img
                                                            src="/{{ image_folders['category_images']['category_icon']['path'] }}/{{ category.image }}"
                                                            alt="{{ category.name }}"
                                                            width="219"
                                                            height="219"
                                                            loading="lazy"
                                                    >
                                                {% else %}
                                                    <img
                                                            src="/sites/default/images/placeholders/default-hero.png"
                                                            alt="{{ category.name }}"
                                                            width="219"
                                                            height="219"
                                                            loading="lazy"
                                                    >
                                                {% endif %}

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

                                        </div> <!-- .categoryCTAWrap__imageBox -->

                                        <div class="categoryCard__text">
                                            {{ category.name }}
                                        </div>

                                    </a>

                                </div>

                            {% endif %}

                        {% endfor %}
                    {% endfor %}

                </div>
            {% endif %}

        </div> <!-- .wrapper -->

    </section> <!-- .categoryCTAWrap -->

{% endif %}
