{% set categoryEntities =  element.config.enableCustomCategories.value ? element.data.categories : page.header.extensions.navigationTree.navigationTree %}

<div class="row {{ 'row-cols-' ~ element.config.mobileColumnCount.value }} row-cols-md-{{  element.config.tabletColumnCount.value }} row-cols-lg-{{  element.config.desktopColumnCount.value }} g-3 g-md-4 g-lg-5">
    {% for category in categoryEntities %}
        {% if not category.translated.customFields.loyxx_category_tree_teaser_hidden_from_teaser %}
            <div class="col">
                <div class="card card-categories--products text-bg-light bg-white h-100 border-0 shadow">
                    <div class="row g-0 h-100 align-items-{{ element.config.justifyContent.value }}">
                        <div class="col-md-4 d-flex align-self-stretch">
                            <div class="text-bg-primary clip-right-md w-100">
                                {% if category.translated.customFields.kwhnext_category_tree_teaser_icon %}
                                    {#  dump(category.translated.customFields.kwhnext_category_tree_teaser_icon) #}
                                {% elseif category.media %}

                                    {% sw_thumbnails 'my-thumbnails' with {
                                        media: category.media,
                                        attributes: {
                                            class: "img-fluid object-fit-#{element.config.imageMode.value}",
                                            loading: "lazy",
                                            alt: '{{ category.translated.name }}'
                                        },
                                        sizes: {
                                            'xs': '315px',
                                            'sm': '315px',
                                            'md': '420px',
                                            'lg': '420px',
                                            'xl': '420px',
                                        }
                                    } %}
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-8 d-flex">
                            <div class="card-body p-3 p-md-4 py-lg-5">
                                <h2 class="card-title border-bottom-0">

                                    {% if category.translated.customFields.kwhnext_category_tree_teaser_number %}{{ category.translated.customFields.kwhnext_category_tree_teaser_number }}{% endif %}
                                    {% if category.type != 'folder' %}
                                        <a href="{% if category.externalLink %}{{ category.externalLink }}{% else %}{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}{% endif %}" class="stretched-link">{{ category.translated.name }}</a>
                                    {% else %}
                                        {{ category.translated.name }}
                                    {% endif %}
                                </h2>
                                {% if element.config.teaserEnabled.value and category.translated.customFields.loyxx_category_tree_teaser_teaser is not empty %}
                                    <div class="card-text small d-none d-md-block">
                                        {{ category.translated.customFields.loyxx_category_tree_teaser_teaser | raw }}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>
