<div class="row">

    {% set  loyxxCttTextClasses = "" %}

    {% if element.config.textOverImage.value.isEnabled %}
        {% set  loyxxCttTextClasses = "loyxx-ctt-box-text-over-image-enabled" %}
        {% set loyxxCttTextClasses = loyxxCttTextClasses ~ " " ~ (element.config.textOverImage.value.isFullWidth ? 'loyxx-ctt-box-text-over-image-full-width' : '') %}
        {% set loyxxCttTextClasses = loyxxCttTextClasses ~ " loyxx-ctt-box-text-over-image-position__#{element.config.textOverImage.value.position}" %}
    {% endif %}

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

    {% for category in categoryEntities %}



        {% if not category.translated.customFields.loyxx_category_tree_teaser_hidden_from_teaser %}
            <div class="col-{{ (12 / element.config.mobileColumnCount.value )| round }} col-md-{{ (12 / element.config.tabletColumnCount.value )| round }} col-lg-{{ (12 / element.config.desktopColumnCount.value )| round }}">

                {% if category.type != 'folder' %}

                <a href="{% if category.externalLink %}{{ category.externalLink }}{% else %}{{ seoUrl('frontend.navigation.page', { navigationId: category.id }) }}{% endif %}">
                    {% endif %}
                    <div class="kwh-ctt-box">
                        {% block loyxx_category_tree_teaser_category_image %}
                            <div class="kwh-ctt-image">
                                {% if category.media %}
                                    {% set thumbnails = category.media.thumbnails.elements %}
                                    {% if thumbnails is not empty %}
                                        {% set hasThumb = false %}
                                        {# Take only thumbnail with width 400 #}
                                        {% for thumbnail in thumbnails %}
                                            {% if thumbnail.width == 400 %}
                                                {% set hasThumb = true %}
                                                {% sw_include '@LoyxxSW6CategoryTreeTeaser/storefront/partials/category-tree-teaser-default-image.html.twig' with {
                                                    image : thumbnail.url,
                                                    name  : category.translated.name
                                                } %}
                                            {% endif %}
                                        {% endfor %}

                                        {% if not hasThumb %}
                                            {% set thumbnail = thumbnails | last %}
                                            {% sw_include '@LoyxxSW6CategoryTreeTeaser/storefront/partials/category-tree-teaser-default-image.html.twig' with {
                                                image : thumbnail.url,
                                                name  : category.translated.name
                                            } %}
                                        {% endif %}
                                    {% else %}
                                        {# if no thumbnails found then use original image #}
                                        {% sw_include '@LoyxxSW6CategoryTreeTeaser/storefront/partials/category-tree-teaser-default-image.html.twig' with {
                                            image : category.media.url,
                                            name  : category.translated.name
                                        } %}
                                    {% endif %}
                                {% else %}
                                    {# if no media found then use default media set by plugin config #}
                                    {# and if there is no default plugin image set then use a placeholder image #}
                                    {% sw_include '@LoyxxSW6CategoryTreeTeaser/storefront/partials/category-tree-teaser-default-image.html.twig' with {
                                        image : page.header.extensions.navigationTree.defaultMedia ? page.header.extensions.navigationTree.defaultMedia.url : asset('icons/placeholder.svg', '@LoyxxSW6CategoryTreeTeaser'),
                                        name  : category.translated.name,
                                        type  : category.media.mediaType.flags
                                    } %}
                                {% endif %}
                            </div>
                        {% endblock %}

                        {% block loyxx_category_tree_teaser_category_name_section %}
                        <div class="kwh-ctt-content {{ element.config.textConfig.value.isEnabled ? 'is-style-enabled' : '' }} {{ element.config.textConfig.value.icon and element.config.textConfig.value.icon is not same as ('none') ? 'loyxx-ctt-title-has-icon' : '' }}"
                                {% if element.config.textConfig.value.isEnabled %}
                                    style="background-color: {{ element.config.textConfig.value.isEnabled ? element.config.textConfig.value.backgroundColor: 'transparent' }};
                                            color: {{ element.config.textConfig.value.isEnabled ? element.config.textConfig.value.fontColor: '#333333' }};
                                            border-radius: {{ element.config.textConfig.value.isEnabled ? element.config.textConfig.value.borderRadius | trim('px','right') : '0' }}px;
                                            padding: {{ element.config.textConfig.value.isEnabled ? element.config.textConfig.value.padding | trim('px','right') : '0' }}px;"
                                {% endif %}
                        >
                            {% block loyxx_category_tree_teaser_category_name %}
                            <div class="kwh-ctt-title">
                                <div class="kwh-ctt-index">{{ loop.index }}</div>
                                {% block loyxx_category_tree_teaser_category_icon_before %}
                                    {% if category.translated.customFields.loyxx_category_tree_teaser_icons %}
                                        {% sw_include "@Storefront/storefront/utilities/icon.html.twig" with { 'name': category.translated.customFields.loyxx_category_tree_teaser_icons, 'size': 'sm' } %}
                                    {% endif %}
                                {% endblock %}

                                {{ category.translated.name }}

                                {% block loyxx_category_tree_teaser_category_icon_after %}
                                    {% if element.config.textConfig.value.icon and element.config.textConfig.value.icon is not same as ('none') and not category.translated.customFields.loyxx_category_tree_teaser_hide_shopping_world_icon %}
                                        {% sw_include "@Storefront/storefront/utilities/icon.html.twig" with { 'name': element.config.textConfig.value.icon, 'size': 'sm' } %}
                                    {% endif %}
                                {% endblock %}
                            </div>

                            {% block loyxx_category_tree_teaser_category_name_teaser %}
                                {% if element.config.teaserEnabled.value %}
                                    <div class="kwh-ctt-teasertext">
                                        {% if category.translated.customFields.loyxx_category_tree_teaser_teaser is not empty %}
                                            {{ category.translated.customFields.loyxx_category_tree_teaser_teaser | raw }}
                                        {% else %}
                                            {{ (category.translated.description|length > 150 ? category.translated.description|striptags|slice(0, 150) ~ '…' : category.translated.description) }}
                                        {% endif %}
                                    </div>
                                {% endif %}
                            {% endblock %}
                        </div>
                        {% endblock %}
                    </div>
                    {% endblock %}

                    {% if category.type != 'folder' %}
                </a>
                {% endif %}

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