{% assign offset = include.offset | default: 40 %}
{% assign limit = include.limit | default: 7 %}
{% assign percentage = include.percentage | default: 20 %}
{% assign percentage-color = include.percentage-color | default: "green" %}
{% assign due = include.due | default: "2 days" %}
<div class="card">
	{% include ui/progress.html percentage=percentage class="card-progress" color=percentage-color %}
	<div class="card-body">
		<div class="dropdown card-options">
			<button class="btn-options" type="button" data-toggle="dropdown">
				{% include ui/icon.html icon="more-vertical" %}
			</button>
			{% include ui/dropdown-menu.html right=true %}
		</div>
		<div class="card-title">
			<h6 class="h4 mb-3"><a href="#">{{ include.title | default: 'Task Title' }}</a>{% if include.badge %} <span class="badge">{{ include.badge }}</span>{% endif %}</h6>
		</div>

		{% include ui/avatar-list.html offset=offset limit=limit size="sm" stacked=true class="mb-3" %}

		<div class="card-meta d-flex justify-content-between">
			<div class="d-flex align-items-center">
				{% include ui/icon.html icon="check-square" class="mr-2" %}
				<span>5/10</span>
			</div>
			<span>Due {{ due }}</span>
		</div>
	</div>
</div>