{% if blog_categories %}
<div class="pr-column-categories d-flex flex-column content-block p-0 overflow-hidden">
	<div class="pr-column-categories-title py-3 px-4 dark-text fw-700 bg-light-grey">{{ heading_title }}</div>
	<div class="pr-column-categories-list">
		<ul class="list-unstyled pr-column-categories-list p-0 d-flex flex-column">
			{% for blog_category in blog_categories %}
				<li class="pr-column-categories-list-item py-3 ps-4 pe-3">
					<span class="d-flex align-items-center justify-content-between">
						<a href="{{ blog_category.href }}" class="{% if blog_category.blogcategory_id == blogcategory_id %}blue-link{% else %}dark-link{% endif %} fw-500 fsz-14 lh-sm">{{ blog_category.name }}</a>
						{% if blog_category.children %}
							<button class="no-btn p-2" aria-label="Toggle" data-bs-toggle="collapse" data-bs-target="#collapse{{ blog_category.category_id }}" aria-expanded="{% if blog_category.blogcategory_id == blogcategory_id %}true{% else %}false{% endif %}" aria-controls="collapse{{ blog_category.category_id }}">
								<svg xmlns="http://www.w3.org/2000/svg" width="5" height="9" viewBox="0 0 5 9" fill="none">
									<path d="M1 7.5L4 4.5L1 1.5" stroke="var(--pr-black-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
								</svg>
							</button>
						{% endif %}
					</span>
					{% if blog_category.children %}
						<div class="collapse pr-column-categories-collapse{% if blog_category.blogcategory_id == blogcategory_id %} show{% endif %}" id="collapse{{ blog_category.category_id }}">
							<ul class="list-unstyled p-0 mt-3">
								{% for child in blog_category.children %}
									<li>
										<a href="{{ child.href }}" class="{% if child.blogcategory_id == blogchild_id %}blue-link{% else %}light-link{% endif %} fw-500 fsz-14">{{ child.name }}</a>
									</li>
								{% endfor %}
							</ul>
						</div>
					{% endif %}
				</li>
			{% endfor %}
		</ul>
	</div>
</div>
<script>
    const columnToShow = document.querySelector('.pr-column');

    if (columnToShow) {
        columnToShow.classList.add('display-column');
    }
</script>
{% endif %}
{% if search_block %}
	<div class="pr-column-categories d-flex flex-column content-block p-0 overflow-hidden">
		<div class="pr-column-categories-title py-3 px-4 dark-text fw-700 bg-light-grey">
			{{ search_title }}
		</div>
		<div id="blog_search" class="pr-blog-search p-3 position-relative">
			<input type="text" name="blog_search" value="" placeholder="{{ search_placeholder }}" class="form-control w-100 pe-5">
			<button type="button" id="oct-blog-search-button" class="no-btn position-absolute" aria-label="Search">
				<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
                    <path d="M1 17.5L4.86057 13.6394M17 8.61111C17 12.5385 13.8162 15.7222 9.88889 15.7222C5.96153 15.7222 2.77778 12.5385 2.77778 8.61111C2.77778 4.68375 5.96153 1.5 9.88889 1.5C13.8162 1.5 17 4.68375 17 8.61111Z" stroke="#4F5F99" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
			</button>
		</div>
	</div>
{% endif %}
