description = "Categories"

[viewBag]
==
{% if blogCategories.categories %}
<div class="mb-12 
    {% if (blogPosts.posts and this.theme.blog_posts_style != 'style1') or (searchResults.results and this.theme.blog_posts_style != 'style1') or (blogPost.post and this.theme.blog_post_style != 'style1') %}card border-0 shadow p-7{% endif %}" 
    {% if (blogPosts.posts and this.theme.blog_posts_animation) or (blogPost.post and this.theme.blog_post_animation) %}data-aos="fade-up" data-aos-duration="1200"{% endif %}
>
    <h4 class="mb-7">Categories</h4>
    <div id="category-nav">
        <!-- Categories -->
        <div class="list-group panel">
            {% set totalPostCount = 0 %}
            {% for category in categories %}
            {% set postCount = category.post_count %}
            {% set totalPostCount = totalPostCount + postCount %}
            {% endfor %}
            <a href="{{ 'blog/blog'|page }}" class="list-group-item d-flex align-items-center display-12 border-0 rounded-0 text-link py-2 px-0 bg-transparent"><i class="fas fa-arrow-circle-right display-13 text-default mr-2"></i>
            <span>All</span>
            <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-6r h-6r">{{ totalPostCount }}</span>
            </a>
            {% if blogCategories.categories %}
            {% for category in categories %}
            {% set postCount = category.post_count %}
            <a href="{{ category.children is not empty ? '#categoryMenu' ~ category.name|replace({' ':'-'}) : category.url }}" class="list-group-item d-flex align-items-center display-12 border-0 rounded-0 text-link py-2 px-0 bg-transparent {{ category.slug == currentCategorySlug ? 'active' : '' }} {{ category.children is not empty ? 'collapsed' : '' }}" {% if category.children is not empty %}data-toggle="collapse" aria-expanded="false"{% endif %}>
                <i class="{{ category.children is not empty ? 'fas fa-plus-circle text-danger' : 'fas fa-arrow-circle-right text-default' }} display-13 mr-2"></i>
                <span>{{ category.name }}</span>
                {% if postCount %}
                <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-6r h-6r">
                    {{ postCount }}
                </span>
                {% endif %}
            </a>
            {% if category.children is not empty %}
            <div class="list-subgroup collapse" id="{{ 'categoryMenu' ~ category.name|replace({' ':'-'}) }}" data-parent="#category-nav">
                {% for subcategory in category.children %}
                {% set SubPostCount = subcategory.post_count %}
                <a href="{{ subcategory.children is not empty ? '#categoryMenuSub' ~ subcategory.name|replace({' ':'-'}) : subcategory.url }}" class="list-group-item d-flex align-items-center display-12 border-0 rounded-0 text-link py-2 pl-3 pr-0 bg-transparent {{ subcategory.slug == currentCategorySlug ? 'active' : '' }}" {% if subcategory.children is not empty %}data-toggle="collapse" aria-expanded="false"{% endif %}>
                    <i class="{{ subcategory.children is not empty ? 'fas fa-plus-circle text-danger' : 'fas fa-arrow-circle-right text-default' }} display-13 mr-2"></i>
                     <span>{{ subcategory.name }}</span>
                    {% if SubPostCount %}
                    <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-6r h-6r">
                        {{ SubPostCount }}
                    </span>
                    {% endif %}
                </a>
                {% if subcategory.children is not empty %}
                <div class="list-subgroup collapse" id="{{ 'categoryMenuSub' ~ subcategory.name|replace({' ':'-'}) }}" data-parent="#{{ 'categoryMenu' ~ category.name|replace({' ':'-'}) }}">
                    {% for childcategory in subcategory.children %}
                    {% set childPostCount = childcategory.post_count %}
                    <a href="{{ childcategory.children is not empty ? '#categoryMenuSubChild' ~ childcategory.name|replace({' ':'-'}) : childcategory.url }}" class="list-group-item d-flex align-items-center display-12 border-0 rounded-0 text-link py-2 pl-6 pr-0 bg-transparent {{ childcategory.slug == currentCategorySlug ? 'active' : '' }}" {% if childcategory.children is not empty %}data-toggle="collapse" aria-expanded="false"{% endif %}>
                        <i class="{{ childcategory.children is not empty ? 'fas fa-plus-circle text-danger' : 'fas fa-arrow-circle-right text-default' }} display-13 mr-2"></i>
                        <span>{{ childcategory.name }}</span>
                        {% if childPostCount %}
                        <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-6r h-6r">
                            {{ childPostCount }}
                        </span>
                        {% endif %}
                    </a>
                    {% if childcategory.children is not empty %}
                    <div class="list-subgroup collapse" id="{{ 'categoryMenuSubChild' ~ childcategory.name|replace({' ':'-'}) }}" data-parent="#{{ 'categoryMenuSub' ~ subcategory.name|replace({' ':'-'}) }}">
                        {% for subchildcategory in childcategory.children %}
                        {% set subChildPostCount = subchildcategory.post_count %}
                        <a href="{{ subchildcategory.url }}" class="list-group-item d-flex align-items-center display-12 border-0 rounded-0 text-link py-2 pl-9 pr-0 bg-transparent {{ subchildcategory.slug == currentCategorySlug ? 'active' : '' }}">
                            <i class="fas fa-arrow-circle-right display-13 text-default mr-2"></i>
                            <span>{{ subchildcategory.name }}</span>
                            {% if subChildPostCount %}
                            <span class="ml-auto d-flex justify-content-center align-items-center display-14 font-weight-medium text-white bg-danger rounded-circle w-6r h-6r">
                                {{ subChildPostCount }}
                            </span>
                            {% endif %}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
            {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
{% endif %}