<section class="categoryTabs">


        <div class="categoryTabs__tabsWrap">

            <div class="wrapper">
                <ul class="categoryTabs__tabs" data-tabs-title>
                    {% for category in homeCategories %}
                        <li class="{% if loop.index == 1 %}active{% endif %}" data-target="#t{{ loop.index }}">

                            <span>
                                {{ category.name }}
                            </span>

                        </li>
                    {% endfor %}
                </ul>
            </div>

        </div> <!-- .categoryTabs__tabsWrap -->

        <div class="categoryTabs__body">

            <div class="wrapper">

                <div class="categoryTabs__content" data-tabs-content>
                    {% for category in homeCategories %}

                        <ul id="t{{ loop.index }}" class="categoryTabs__list {% if loop.index == 1 %}active{% endif %}">

                            {% for subCategory in category.children %}
                                <li>

                                    <a href="{{ subCategory.url }}" class="categoryTabs__card">

                                        <div class="categoryTabs__imageWrap {% if subCategory.thumb_image is empty %} noImage{% endif %}">

                                            {% if subCategory.thumb_image is not empty %}
                                                <img
                                                        src="/{{ image_folders['category_thumb_images']['home_image']['path'] }}/{{ subCategory.thumb_image }}"
                                                        alt="{% if subCategory.thumb_image_alt is not empty %}{{ subCategory.thumb_image_alt }}{% else %}{{ subCategory.name }}{% endif %}"
                                                        {% if loop.index > 1 %}
                                                            loading="lazy"
                                                        {% endif %}
                                                >
                                           {% else %}
                                               <img
                                                       src="{{ settings.THEME_URL }}/images/placeholders/no-image-items-thumb.png"
                                                       alt="{{ subCategory.name }}"
                                                       {% if loop.index > 1 %}
                                                           loading="lazy"
                                                       {% endif %}
                                               >
                                           {% endif %}
                                        </div> <!-- .categoryTabs__imageWrap -->

                                        <h2 class="categoryTabs__title">
                                            {{ subCategory.name }}
                                        </h2>

                                    </a>

                                </li>
                            {% endfor %}

                        </ul>
                    {% endfor %}
                </div>

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

        </div> <!-- .categoryTabs__body -->



</section> <!-- .categoryTabs -->
