{% macro task_card(task) %}
<article class="task-card task-card--{{ task.priority }}">
    <div class="task-card__header">
        <div>
            <span class="badge badge--{{ task.priority }}">{{ task.priority|capitalize }}</span>
            <span class="status">{{ task.status|replace('_', ' ')|title }}</span>
        </div>
        {% if task.due_date %}
            <time datetime="{{ task.due_date.isoformat() }}">
                Due {{ task.due_date.strftime('%d %b, %H:%M') }}
            </time>
        {% endif %}
    </div>
    <h2><a href="{{ url_for('tasks.detail', task_id=task.id) }}">{{ task.title }}</a></h2>
    {% if task.description %}<p>{{ task.description|truncate(180) }}</p>{% endif %}
    <div class="progress-row">
        <label for="task-progress-{{ task.id }}">Progress</label>
        <progress id="task-progress-{{ task.id }}" max="100" value="{{ task.progress_percentage }}">
            {{ task.progress_percentage }}%
        </progress>
        <span>{{ task.progress_percentage }}%</span>
    </div>
    {% if task.status != 'done' %}
        <a class="task-card__focus" href="{{ url_for('tasks.focus_task', task_id=task.id) }}">Focus on this task</a>
    {% endif %}
</article>
{% endmacro %}