<div class="blog-sidebar">
	<div class="widget card mb-4">
		<div class="card-content">
			<div class="mb-4 category-widget">
				<div class="widget-title">
					<h3>Categories</h3>
				</div>
				<div class="pt-0">
					<ul class="list-unstyled cat-list">
						{{#each data.categories}}
						<li><a href="javascript:void(0)">{{this}}</a></li>
						{{/each}}
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="widget card mb-4">
		<div class="card-content">
			<div class="mb-4 tags-widget">
				<div class="widget-title">
					<h3>Tags</h3>
				</div>
				<div class="pt-0">
					<ul class="list-unstyled">
						{{#each data.tags}}
						<li><a href="javascript:void(0)">{{this}}</a></li>
						{{/each}}
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="widget card mb-4">
		<div class="card-content">
			<div class="mb-4 blog-list-widget">
				<div class="widget-title">
					<h3>Popular Blog</h3>
				</div>
				<div class="">
					<ul class="list-unstyled pa-0 ma-0">
						{{#each data.populerBlogs}}
						<li class="d-flex mb-2">
							<div class="blog-thumb mr-4">
								<img src="{{thumbnail}}" class="img-responsive" width="80" height="80">
							</div>
							<div class="blog-content">
								<p class="mb-0">
									<a href="javascript:void(0)" class="text-sm primary-text fw-bold">{{title}}</a>
								</p>
								<span class="text-sm">Likes: {{likes}}, Comments: {{comments}}</span>
							</div>
						</li>
						{{/each}}
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
