{#- Minimalist single-color line icons (inherit color via currentColor) -#}
{% macro icon(name, cls="") %}
<svg class="ico {{ cls }}" viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
{%- if name == 'tasks' -%}
  <line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/>
  <circle cx="4.5" cy="6" r="1.1"/><circle cx="4.5" cy="12" r="1.1"/><circle cx="4.5" cy="18" r="1.1"/>
{%- elif name == 'plus' -%}
  <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
{%- elif name == 'check' -%}
  <polyline points="20 6 9 17 4 12"/>
{%- elif name == 'check-circle' -%}
  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
{%- elif name == 'team' -%}
  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
  <path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
{%- elif name == 'report' -%}
  <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
{%- elif name == 'chevron' -%}
  <polyline points="9 18 15 12 9 6"/>
{%- elif name == 'logout' -%}
  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
{%- elif name == 'user' -%}
  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
{%- elif name == 'calendar' -%}
  <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
{%- elif name == 'edit' -%}
  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
{%- elif name == 'trash' -%}
  <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
{%- elif name == 'rotate' -%}
  <polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
{%- elif name == 'block' -%}
  <circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
{%- elif name == 'bell' -%}
  <path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
{%- elif name == 'alert' -%}
  <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
{%- endif -%}
</svg>
{% endmacro %}

{% macro task_card(task, show_assignee=False, allow_complete=False) %}
<div class="task-card {{ 'overdue' if task.overdue }} {{ 'done' if task.status == 'completed' }}">
  <a class="task-body" href="{{ url_for('tasks.detail', task_id=task.id) }}">
    <div class="task-main">
      <div class="task-title">{{ task.title }}</div>
      {% if show_assignee %}
        <div class="task-meta">{{ icon('user', 'ico-sm') }} {{ task.assignee_name }}</div>
      {% endif %}
      <div class="task-meta">
        {% if task.status == 'completed' %}
          {{ icon('check', 'ico-sm') }} Completed {{ task.completed_at | nicedatetime }}
        {% else %}
          {{ icon('calendar', 'ico-sm') }} {{ task.due_date | nicedate }}
          {% if task.spillover %}
            <span class="badge badge-spill">Spilled over · {{ task.days_late }}d late</span>
          {% elif task.overdue %}
            <span class="badge badge-overdue">Overdue</span>
          {% endif %}
        {% endif %}
      </div>
    </div>
  </a>
  {% if allow_complete and task.status == 'open' %}
    <form class="task-tick" method="post" action="{{ url_for('tasks.complete', task_id=task.id) }}">
      <button type="submit" class="tick-btn" aria-label="Mark complete" title="Mark complete">
        {{ icon('check') }}
      </button>
    </form>
  {% else %}
    <a class="task-go" href="{{ url_for('tasks.detail', task_id=task.id) }}" aria-hidden="true">
      {{ icon('chevron', 'ico-sm') }}
    </a>
  {% endif %}
</div>
{% endmacro %}