{% capture append = "oxidBlock_content" %}
    <h1 class="c4s-page-header">{{ translate({ ident: "CATEGORY_OVERVIEW" }) }}</h1>

    {% set oCategoryTree = oView.getCategoryTree() %}
    {% set _iCategoriesPerRow = 3 %}
    {% set iSubCategoriesCount = 0 %}
    {% if not empty(oCategoryTree) and oCategoryTree.count() %}
        {{ script({ include: "js/widgets/oxequalizer.min.js", priority: 10, dynamic: __oxid_include_dynamic }) }}
        {{ script({ add: "$(window).load(function(){ if( !isMobileDevice() ) { oxEqualizer.equalHeight( $( '.subcatList .row .panel' ) ); } });", dynamic: __oxid_include_dynamic }) }}
        <div class="subcatList">
            <div class="row">
                {% for oCategory in oCategoryTree %}
                    {# TOP categories #}
                    {% if oCategory.getIsVisible() %}
                        {# CMS top categories #}
                        {% if oCategory.getContentCats() %}
                            {% for ocont in oCategory.getContentCats() %}
                                {% set iSubCategoriesCount = iSubCategoriesCount+1 %}
                                <div class="box">
                                    <h3>
                                        <a id="moreSubCms_{{ loop.index }}" href="{{ ocont.getLink()|raw }}">{{ ocont.oxcontents__oxtitle.value }}</a>
                                    </h3>
                                    <ul class="content"></ul>
                                </div>
                            {% endfor %}
                        {% endif %}
                        {% if iSubCategoriesCount % _iCategoriesPerRow == 0 %}
                            </div><div class="row">
                        {% endif %}
                        {% set iSubCategoriesCount = iSubCategoriesCount+1 %}
                        {% set iconUrl = oCategory.getIconUrl() %}
                        <div class="col-12 col-sm-6 col-md-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        <a id="moreSubCat_{{ loop.index }}" href="{{ oCategory.getLink()|raw }}">
                                            {{ oCategory.oxcategories__oxtitle.value }}{% if oView.showCategoryArticlesCount() and (oCategory.getNrOfArticles() > 0) %} ({{ oCategory.getNrOfArticles() }}){% endif %}
                                        </a>
                                    </h3>
                                </div>
                                {# Top categories subcategories #}
                                {% if oCategory.getHasVisibleSubCats() %}
                                    <div class="panel-body">
                                        {% if iconUrl %}
                                            <div class="text-center">
                                                <a href="{{ oCategory.getLink()|raw }}">
                                                    <img src="{{ oCategory.getIconUrl() }}" alt="{{ oCategory.oxcategories__oxtitle.value }}" class="img-thumbnail" height="100" width="168">
                                                </a>
                                            </div>
                                        {% endif %}
                                        <ul class="content">
                                            {% for oSubCategory in oCategory.getSubCats() %}
                                                {% if oSubCategory.getIsVisible() %}
                                                    {# CMS subcategories #}
                                                    {% for oContentCategory in oSubCategory.getContentCats() %}
                                                        <li>
                                                            <a href="{{ oCont.getLink()|raw }}"><strong>{{ oCont.oxcontents__oxtitle.value }}</strong></a>
                                                        </li>
                                                    {% endfor %}
                                                    <li>
                                                        <a href="{{ oSubCategory.getLink()|raw }}">
                                                            <strong>{{ oSubCategory.oxcategories__oxtitle.value }}</strong>{% if oView.showCategoryArticlesCount() and (oSubCategory.getNrOfArticles() > 0) %} ({{ oSubCategory.getNrOfArticles() }}){% endif %}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            {% endfor %}
                                        </ul>
                                    </div>
                                {% elseif iconUrl %}
                                    <div class="panel-body catPicOnly">
                                        <div class="subcatPic text-center">
                                            {% if iconUrl %}
                                                <a href="{{ oCategory.getLink()|raw }}">
                                                    <img src="{{ oCategory.getIconUrl() }}" alt="{{ oCategory.oxcategories__oxtitle.value }}" class="img-thumbnail" height="100" width="168">
                                                </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% else %}
                                    <div class="content"></div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}
                    {% if iSubCategoriesCount % _iCategoriesPerRow == 0 %}
                        </div>
                        <div class="row">
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    {% endif %}
    {{ insert_tracker() }}
{% endcapture %}


{% include "layout/page.html.twig" with {sidebar: "left"} %}