{% block widget_header_categorylist %}
    {% if oxcmp_categories %}
        {% set blHomeSelected = false %}
        {% if oViewConf.getTopActionClassName() == "start" %}
            {% set blHomeSelected = true %}
        {% endif %}
        {% set blFullwidth = oViewConf.getViewThemeParam("blFullwidthLayout") %}
        {% set sCategoryMenuType = oViewConf.getViewThemeParam("sCategoryMenuType") %}
        {% set blDisplayMyCompanyMenu = oViewConf.getViewThemeParam("blDisplayMyCompanyMenu") %}
        {% set blDisplaySubCatHover = oViewConf.getViewThemeParam("blDisplaySubCatHover") %}

        <nav class="navbar navbar-expand-lg navbar-light c4s-header-navigation">
            <div class="container{% if blFullwidth %}-fluid{% else %}-lg{% endif %}">

                {% block widget_header_categorylist_navbar %}
                    <div class="collapse navbar-collapse">

                        <ul id="c4s-header-category-menu" class="nav navbar-nav me-auto c4s-header-category-menu" data-lang-more="{{ translate({ ident: "MORE" }) }}">
                            {% block dd_widget_header_categorylist_navbar_list %}
                                {% for catkey, oCat in oxcmp_categories %}
                                    {% if oCat.getIsVisible() %}
                                        <li class="nav-item{% if oCat.getSubCats() %} dropdown{% endif %}{% if sCategoryMenuType == "full" %} position-static{% endif %}{% if blHomeSelected == false and oCat.expanded %} active{% endif %}{% if loop.first %} first{% endif %}">
                                            <a href="{{ oCat.getLink()|raw }}"
                                               class="nav-link d-xs-none d-md-block{% if oCat.getSubCats() %} dropdown-toggle{% endif %} c4s-header-category-menu-link"
                                               {% if oCat.getSubCats() %}
                                                   role="button"
                                                   aria-expanded="false"
                                               {% endif %}
                                            >
                                                {% apply spaceless %}
                                                    {% block widget_header_categorylist_title %}
                                                        {{ oCat.oxcategories__oxtitle.value|replace({"&lt;br&gt;": "\n"})|raw }}
                                                    {% endblock %}
                                                {% endapply %}
                                            </a>

                                            {# sub categories #}
                                            {% if oCat.getSubCats() %}
                                                {% if sCategoryMenuType == "full" %}
                                                    <div class="dropdown-menu w-100 c4s-header-subcategory-menu">
                                                        <div class="container{% if blFullwidth %}-fluid{% else %}-lg{% endif %}">
                                                            {% include "widget/header/inc/subcategories.html.twig" with {iSubCatDepth: 1, aSubCats: oCat.getSubCats()} %}
                                                        </div>
                                                    </div>
                                                {% else %}
                                                    <ul class="dropdown-menu c4s-header-subcategory-menu">
                                                        {% for subcatkey, oSubCat in oCat.getSubCats() %}
                                                            {% if oSubCat.getIsVisible() %}
                                                                {% for oSubCatCont in oSubCat.getContentCats() %}
                                                                    <li>
                                                                        <a href="{{ oSubCatCont.getLink()|raw }}" class="dropdown-item">{{ oSubCatCont.oxcontents__oxtitle.value }}</a>
                                                                    </li>
                                                                {% endfor %}

                                                                {% if oSubCat.getIsVisible() %}
                                                                    <li {% if blHomeSelected == false and oSubCat.expanded %}class="active"{% endif %}>
                                                                        <a class="dropdown-item{% if blHomeSelected == false and oSubCat.expanded %} current{% endif %}" href="{{ oSubCat.getLink()|raw }}">{{ oSubCat.oxcategories__oxtitle.value }}</a>
                                                                    </li>
                                                                {% endif %}
                                                            {% endif %}
                                                        {% endfor %}
                                                    </ul>
                                                {% endif %}
                                            {% endif %}
                                        </li>

                                        {# content categories #}
                                        {% for oTopCont in oCat.getContentCats() %}
                                            {% set oSubContentCats = {} %} {# will be filled by vcms module block extension #}
                                            {% set blIsActiveRootContent = false %} {# will be filled by vcms module block extension #}
                                            {% block widget_header_categorylist_content_cat %}
                                                <li class="nav-item{% if oSubContentCats %} dropdown{% endif %}{% if sCategoryMenuType == "full" %} position-static{% endif %}{% if blIsActiveRootContent %} active{% endif %}">
                                                    <a href="{{ oTopCont.getLink()|raw }}"
                                                       class="nav-link d-xs-none d-md-block{% if oSubContentCats %} dropdown-toggle{% endif %} c4s-header-category-menu-link"
                                                           {% if oSubContentCats %}
                                                               role="button"
                                                               aria-expanded="false"
                                                           {% endif %}
                                                        >
                                                        {{ oTopCont.oxcontents__oxtitle.value }}
                                                    </a>

                                                    {# sub content categories #}
                                                    {% if oSubContentCats %}
                                                        <div class="dropdown-menu w-100 c4s-header-subcategory-menu">
                                                            <div class="container{% if blFullwidth %}-fluid{% else %}-lg{% endif %}">
                                                                {% include "widget/header/inc/subcontentcategories.html.twig" with {iSubContentCatDepth: 1, oSubContentCats: oSubContentCats} %}
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                </li>
                                            {% endblock %}
                                        {% endfor %}
                                    {% endif %}
                                {% endfor %}
                            {% endblock %}
                        </ul>

                        {# company menu #}
                        {% if blDisplayMyCompanyMenu %}
                            <ul id="c4s-header-company-menu" class="nav navbar-nav d-xs-none d-md-block c4s-header-company-menu">
                                {% if oView.getUser() %}
                                    <li class="nav-item dropdown">
                                        <a href="{{ seo_url({ ident: oViewConf.getSelfLink()|raw ~ "cl=account" }) }}"
                                           class="nav-link dropdown-toggle"
                                           aria-expanded="false"
                                        >
                                            <span class="menu-item">
                                                {{ translate({ ident: "MY_COMPANY" }) }}
                                                <i class="fa-solid fa-angle-down"></i>
                                            </span>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-end">
                                            <div class="list-group my-2 mx-4">
                                                {% block widget_header_companymenu_dropdown_list %}
                                                    <a href="{{ seo_url({ ident: oViewConf.getSslSelfLink()|raw ~ "cl=account" }) }}"
                                                       class="list-group-item c4s-header-company-menu-link"
                                                    >{{ translate({ ident: "MY_ACCOUNT" }) }}</a>
                                                {% endblock %}
                                            </div>
                                            <div class="d-grid mx-4 mt-4 mb-2">
                                                <a class="btn btn-primary c4s-logout-btn" role="button" href="{{ oViewConf.getLogoutLink()|raw }}" title="{{ translate({ ident: "LOGOUT" }) }}">
                                                    <span class="float-start">{{ translate({ ident: "LOGOUT" }) }}</span>
                                                    <span class="float-end"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>
                                                </a>
                                            </div>
                                        </div>
                                    </li>
                                {% else %}
                                    <li>
                                        <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#c4s-login-modal">{{ translate({ ident: "MY_COMPANY" }) }}</a>
                                    </li>
                                {% endif %}
                            </ul>
                        {% endif %}

                        {% if oView.isDemoShop() %}
                            <a href="{{ oViewConf.getBaseDir() }}admin/" class="btn btn-sm btn-danger navbar-btn navbar-right visible-lg">
                                {{ translate({ ident: "DEMO_ADMIN_TOOL" }) }}
                                <i class="fa-solid arrow-up-right-from-square" style="font-size: 80%;"></i>
                            </a>
                        {% endif %}

                    </div>
                {% endblock %}
            </div>
        </nav>
    {% endif %}
{% endblock %}