{% set actCategory = oView.getActiveCategory() %}
{% set showPopBreadcrump = oViewConf.getViewThemeParam('sShowPopBreadcrump') %}
{% set oPageNavigation = oView.getPageNavigation() %}

{% capture append = "oxidBlock_sidebar" %}
    {% set listType = oView.getListType() %}
    {% if listType=='manufacturer' or listType=='vendor' %}
        {% if actCategory and actCategory.getIconUrl() %}
        <div class="box">
            <h2 class="h3">
                {% if listType=='manufacturer' %}
                    {{ translate({ ident: "BRAND" }) }}
                {% elseif listType=='vendor' %}
                    {{ translate({ ident: "VENDOR" }) }}
                {% endif %}
            </h2>
            <div class="featured icon">
                <img loading="lazy" src="{{ actCategory.getIconUrl()|raw }}" alt="{{ translate({ ident: "MANUFACTURER_IMAGE_ALT", args: actCategory.getTitle() }) }}">
            </div>
        </div>
        {% endif %}
    {% endif %}
{% endcapture %}

{% capture append = "oxidBlock_content" %}
    {% block page_list_listhead %}
    {% if listType=='manufacturer' or listType=='vendor'%}
    <div class="bg-white list-header mb-4">
        <div class="container-xxl">
            <div class="row">
                <div class="col-12{% if actCategory.getIconUrl() %} col-md-6 order-2 order-md-1 {% endif %}">
                    {% if showPopBreadcrump %}
                    <div class="row">
                        {% include "widget/breadcrumb.html.twig" %}
                    </div>
                    {% endif %}

                    <h1{% if actCategory.oxcategories__oxthumb.value and actCategory.getThumbUrl() %} class="text-white"{% endif %}>
                        {{ actCategory.getTitle() }}
                    </h1>
                    {% if actCategory and actCategory.getShortDescription() and oPageNavigation.actPage == 1 %}
                    <div id="catDescLocator" class="categoryDescription pb-5">
                        {{ actCategory.getShortDescription()|raw() }}
                    </div>
                    {% endif %}
                </div>
                {% if actCategory.getIconUrl() %}
                    <div class="col-12 col-md-6 order-1 order-md-1 py-4">
                        <img src="{{ actCategory.getIconUrl()|raw }}" alt="{{ translate({ ident: "MANUFACTURER_IMAGE_ALT", args: actCategory.getTitle() }) }}">
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% else %}
        <div class="bg-white list-header mb-4">
            <div class="container-xxl">
                <div class="row">
                    <div class="col-12{% if actCategory.oxcategories__oxthumb.value and actCategory.getThumbUrl() %} col-md-6 order-2 order-md-1 {% endif %}">
                        {% if showPopBreadcrump %}
                            <div class="row">
                                {% include "widget/breadcrumb.html.twig" %}
                            </div>
                        {% endif %}

                        <h1 class="h2">
                            {{ oView.getTitle() }}
                        </h1>

                        {% if actCategory and actCategory.getShortDescription() and oPageNavigation.actPage == 1 %}
                            <div id="catDescLocator" class="categoryDescription pb-3">
                                {{ actCategory.getShortDescription()|raw() }}
                            </div>
                        {% endif %}

                        {% if actCategory.oxcategories__oxlongdesc.value and oPageNavigation.actPage == 1 %}
                            {% block page_list_long_desc %}
                                <div id="catLongDescLocator" class="categoryDescription">
                                    {{ include(template_from_string(actCategory.oxcategories__oxlongdesc)) }}
                                </div>
                            {% endblock %}
                        {% endif %}
                    </div>
                    {% if actCategory.oxcategories__oxthumb.value and actCategory.getThumbUrl() %}
                        <div class="col-12 col-md-6 order-1 order-md-1 py-4 text-right">
                            <img src="{{ actCategory.getThumbUrl()|raw }}" alt="{{ translate({ ident: "CATEGORY_IMAGE_ALT", args: actCategory.oxcategories__oxtitle.value }) }}" class="w-100 img-fluid">
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    {% endif %}
    {% if oView.hasVisibleSubCats() %}
        <div class="container-xxl">
            {% set iSubCategoriesCount = 0 %}
            <div class="cat-list mb-4 pb-3">
                {% for category in oView.getSubCatList() %}
                    {% if category.getIsVisible() %}
                        {% set iSubCategoriesCount = iSubCategoriesCount+1 %}
                        {% set iconUrl = category.getIconUrl() %}
                        {% if listType=='manufacturer' or listType=='vendor' %}
                            {% set iconAltAttribute = translate({ ident: "MANUFACTURER_IMAGE_ALT", args: category.oxcategories__oxtitle.value }) %}
                        {% else %}
                            {% set iconAltAttribute = translate({ ident: "CATEGORY_IMAGE_ALT", args: category.oxcategories__oxtitle.value }) %}
                        {% endif %}
                            <a href="{{ category.getLink()|raw }}" title="{{ category.oxcategories__oxdesc.value }}" class="cat-list-item">
                                {% if iconUrl %}
                                    <img loading="lazy" src="{{ category.getIconUrl()|raw }}" alt="{{ iconAltAttribute }}" class="cat-list-item-img">
                                {% else %}
                                    <img loading="lazy" src="{{ oViewConf.getImageUrl('subcat-placeholder.png')|raw }}" alt="{{ iconAltAttribute }}" class="cat-list-item-img">
                                {% endif %}
                                <span class="cat-list-item-name">
                                    {{ category.oxcategories__oxtitle.value }}

                                    {% if oView.showCategoryArticlesCount() and (category.getNrOfArticles() > 0) %}
                                        <span class="text-muted">({{ category.getNrOfArticles() }})</span>
                                    {% endif %}
                                </span>
                            </a>
                    {% endif %}

                    {% if category.getContentCats() %}
                        {% for ocont in category.getContentCats() %}
                            <a href="{{ ocont.getLink()|raw }}" title="{{ category.oxcategories__oxdesc.value }}" class="cat-list-item">
                                {% if listType=='manufacturer' or listType=='vendor' %}
                                    {% set iconAltAttribute = translate({ ident: "MANUFACTURER_IMAGE_ALT", args: category.oxcategories__oxtitle.value }) %}
                                {% else %}
                                    {% set iconAltAttribute = translate({ ident: "CATEGORY_IMAGE_ALT", args: category.oxcategories__oxtitle.value }) %}
                                {% endif %}
                                <img loading="lazy" src="{{ oViewConf.getImageUrl('subcat-placeholder.png')|raw }}" alt="{{ iconAltAttribute }}" class="cat-list-item-img">
                                <span class="cat-list-item-name">
                                    {{ ocont.oxcontents__oxtitle.value }}
                                </span>
                            </a>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% endblock %}


    {% block page_list_listbody %}
        {% if oView.getArticleList() %}

            {% set categoryWidth = oViewConf.getViewThemeParam('sCategoryWidth') %}
                <div class="article-list pb-5">
                    <div class="container-xxl">
                        {% if oView.getArticleList() %}
                            {% block page_list_upperlocator %}
                                {% include "widget/locator/listlocator.html.twig" with {locator: oView.getPageNavigationLimitedTop(), attributes: oView.getAttributes(), listDisplayType: true, itemsPerPage: true, sort: true} %}
                            {% endblock %}
                        {% endif %}
                        <div class="row">
                            {% if oView.getArticleList() %}
                                {# List types: grid|line #}
                                {% block page_list_productlist %}
                                    {% include "widget/product/list.html.twig" with {type: oView.getListDisplayType(), listId: "productList", products: oView.getArticleList()} %}
                                {% endblock %}
                                {% block page_list_bottomlocator %}
                                    {% include "widget/locator/listlocator.html.twig" with {locator: oView.getPageNavigationLimitedBottom(), place: "bottom"} %}
                                {% endblock %}
                            {% endif %}
                        </div>
                    </div>
                </div>

            {% block page_list_content %}{% endblock %}

            {% include_content 'oxstartslot4' ignore missing  %}
        {% endif %}
    {% endblock %}
    {{ insert_tracker() }}
{% endcapture %}
{% include "layout/page.html.twig" with {tree_path: oView.getTreePath()} %}