

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