<div class="p-3">
	<ul class="nav flex-column">
		<li class="nav-item">
			<h5 class="nav-title">Tasks</h5>
		</li>
		<li class="nav-item" ng-class="{active: filter.type === ctrl.currentTaskFilter}" ng-repeat="filter in ctrl.task_filters">
			<a class="nav-link" ng-class="{disabled: filter.count === ''}"  href="/projects/tasks?task_filter={{filter.type}}" ng-click="ctrl.setTaskFilter($event, filter.type, filter.count);">
				<span class="badge badge-light badge-pill float-right">{{filter.count}}</span>
				{{filter.label}}
			</a>
		</li>
	</ul>

	<ul class="nav flex-column">
		<li class="nav-item">
			<h5 class="nav-title">Status</h5>
		</li>
		<li class="nav-item" ng-class="{active: filter.type === ctrl.currentStatusFilter}" ng-repeat="filter in ctrl.status_filters">
			<a class="nav-link" ng-class="{disabled: filter.count === ''}" href="/projects/tasks?status_filter={{filter.type}}" ng-click="ctrl.setStatusFilter($event, filter.type, filter.count);" >
				<span class="badge badge-light badge-pill float-right">{{filter.count}}</span>
				{{filter.label}}
			</a>
		</li>
	</ul>
</div>
