{% block element_subcategories_navigation %}
<div class="cms-element-subcategories-navigation">
{% if element.config.showWatermark.value %}<div class="subcategories-navigation-show-watermark"></div>{% endif %}
<h2 class="subcategories-navigation-headline {% if element.config.showWatermark.value %}boxed{% endif %}">{{ element.config.headline.value }}</h2>
{% for topMenuItem in page.header.navigation.tree %}
{% if topMenuItem.category.id == element.config.categoryId.value %}
<div class="subcategories-navigation-container {% if element.config.showWatermark.value %}boxed{% endif %}">
{% for menuItemChild in topMenuItem.children|sort((a, b) => a.category.name <=> b.category.name) %}
{% set childCategory = menuItemChild.category %}
<a class="subcategories-navigation-link" href="{{ category_url(childCategory) }}">
<div class="subcategories-navigation-link-item">
<span class="subcategories-navigation-link-text">{{ childCategory.name }}</span>
</div>
</a>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
{% endblock %}