{% sw_extends '@Storefront/storefront/page/content/index.html.twig' %}

{# Kategorie-Kopf für Listing-Seiten: große Überschrift, Beschreibung, Unterkategorien #}
{% block cms_breadcrumb %}
    {% set rzCategory = page.category is defined ? page.category : null %}
    {% set rzIsListing = rzCategory and page.cmsPage and page.cmsPage.type == 'product_list' and rzCategory.id != context.salesChannel.navigationCategoryId %}
    {% if not rzIsListing %}
        {{ parent() }}
    {% else %}
        {% set rzTopName = page.extensions.rzCategoryHead.topName|default(rzCategory.translated.name) %}
        {# Gleiche Farben wie im mobilen Menü (base.scss, .navigation-offcanvas-root) #}
        {% set rzTints = { 'E-Zigaretten': 'sand', 'POD Systeme': 'kuehl', 'Liquids': 'frucht', 'Aromen': 'suess', 'Basen & Nikotinshots': 'tabak', 'Zubehör': 'getraenk', 'Angebote': 'rot' } %}
        {% set rzTint = rzTints[rzTopName] is defined ? rzTints[rzTopName] : 'sand' %}
        {% set rzChildren = page.extensions.rzSubcategories|default([]) %}

        <div class="container">
            <header class="rz-cat-head rz-cat-head--{{ rzTint }}">
                <span class="rz-cat-head-word" aria-hidden="true">{{ rzTopName ?: rzCategory.translated.name }}</span>
                <div class="rz-cat-head-crumbs">
                    {% if feature('v6.8.0.0') or feature('BREADCRUMB_REWORK') %}
                        {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with { context: context, themeIconConfig: themeIconConfig, breadcrumb: page.breadcrumb } only %}
                    {% else %}
                        {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with { context: context, themeIconConfig: themeIconConfig, categoryId: shopware.navigation.id } only %}
                    {% endif %}
                </div>
                <h1 class="rz-cat-head-title">{{ rzCategory.translated.name }}</h1>
                {# Oben nur eine kurze Einleitung (Zusatzfeld rz_intro).
                   Der lange Kategorietext steht als SEO-Text am Seitenende. #}
                {% set rzIntro = rzCategory.translated.customFields.rz_intro|default(null) %}
                {% if rzIntro %}
                    <p class="rz-cat-head-text">{{ rzIntro }}</p>
                {% endif %}
                {% if rzChildren|length > 0 %}
                    <nav class="rz-cat-head-subs" aria-label="Unterkategorien">
                        {% for child in rzChildren %}
                            <a href="{{ category_url(child) }}" class="rz-cat-chip{% if child.id == rzCategory.id %} is-active{% endif %}">{{ child.translated.name }}</a>
                        {% endfor %}
                    </nav>
                {% endif %}
            </header>
        </div>
    {% endif %}
{% endblock %}

{# Kategorietext als SEO-Text am ENDE der Seite – unter den Produkten, nicht darüber #}
{% block cms_content %}
    {{ parent() }}

    {% set rzSeoCategory = page.category is defined ? page.category : null %}
    {% set rzSeoIsListing = rzSeoCategory and page.cmsPage and page.cmsPage.type == 'product_list' and rzSeoCategory.id != context.salesChannel.navigationCategoryId %}
    {% if rzSeoIsListing and rzSeoCategory.translated.description %}
        <section class="container rz-cat-seo">
            <div class="rz-cat-seo-body rz-prose">
                {{ rzSeoCategory.translated.description|sw_sanitize }}
            </div>
        </section>
    {% endif %}
{% endblock %}