{% macro nav_icon(name) -%}
  <span class="nav-icon">{{ icon_svg(name)|safe }}</span>
{%- endmacro %}

{% macro badge_chip(user_badge) -%}
  <span class="earned-badge">
    <span class="earned-badge__icon">{{ nav_icon(user_badge.badge_definition.icon_name) }}</span>
    <span>{{ user_badge.badge_definition.name }}</span>
  </span>
{%- endmacro %}

{% macro badge_card(badge, earned=false, awarded_at=None) -%}
  <article class="badge-card {% if earned %}badge-card--earned{% endif %}">
    <div class="badge-card__icon">
      {{ nav_icon(badge.icon_name) }}
    </div>
    <div class="badge-card__body">
      <strong>{{ badge.name }}</strong>
      <p class="muted">{{ badge.description }}</p>
      <div class="chip-row">
        <span class="point-pill">Bonus {{ badge.bonus_points }}</span>
        <span class="reward-chip">Schwelle {{ badge.threshold }}</span>
        {% if awarded_at %}
          <span class="reward-chip">Freigeschaltet {{ awarded_at|date_de }}</span>
        {% endif %}
      </div>
    </div>
  </article>
{%- endmacro %}

{% macro status_badge(task) -%}
  <span class="status-badge status-badge--{{ task.status }}">{{ task.status_label }}</span>
{%- endmacro %}

{% macro avatar(user, size='') -%}
  {% if user %}
    {% if user.avatar_path and user.avatar_path.startswith('avatars/') %}
      <img class="avatar {{ size }}" src="{{ url_for('main.uploads', filename=user.avatar_path) }}" alt="Avatar von {{ user.name }}">
    {% else %}
      <img class="avatar {{ size }}" src="{{ url_for('static', filename=user.display_avatar) }}" alt="Avatar von {{ user.name }}">
    {% endif %}
  {% endif %}
{%- endmacro %}

{% macro task_card(task, current_user, compact=false) -%}
  <article class="task-card {% if compact %}task-card--compact{% endif %}">
    <div class="task-card__top">
      <div class="task-card__title-block">
        <div class="chip-row">
          {{ status_badge(task) }}
          <span class="point-pill">{{ task.points_awarded }} Punkte{% if task.is_shared_assignment %} / Person{% endif %}</span>
        </div>
        <h3>{{ task.title }}</h3>
      </div>
      <a class="icon-button" href="{{ url_for('tasks.edit', task_id=task.id) }}" aria-label="Aufgabe bearbeiten">
        {{ nav_icon('gear') }}
      </a>
    </div>

    {% if task.description %}
      <p class="muted">{{ task.description }}</p>
    {% endif %}

    <dl class="task-meta">
      <div>
        <dt>Fällig</dt>
        <dd>{{ task.due_date|date_de }}</dd>
      </div>
      {% if task.completed_at %}
        <div>
          <dt>Erledigt</dt>
          <dd>{{ task.completed_at|datetime_de }}</dd>
        </div>
      {% endif %}
    </dl>

    <div class="task-card__footer">
      <div class="task-assignee">
        <span class="task-assignee__avatars">
          {% for assigned_user in task.assigned_users %}
            {{ avatar(assigned_user) }}
          {% endfor %}
        </span>
        <span>{{ task.assignee_label }}</span>
      </div>

      {% if not task.completed_at %}
        {% if task.assigned_users and current_user.id not in task.assigned_user_ids %}
          <button
            type="button"
            class="button"
            data-complete-action="{{ url_for('tasks.complete', task_id=task.id) }}"
            data-complete-title="{{ task.title }}"
            data-complete-assigned="{{ task.assignee_label }}"
            data-assigned-primary-id="{{ task.assigned_user.id if task.assigned_user else '' }}"
            data-assigned-primary-name="{{ task.assigned_user.name if task.assigned_user else '' }}"
            data-assigned-secondary-id="{{ task.assigned_user_secondary.id if task.assigned_user_secondary else '' }}"
            data-assigned-secondary-name="{{ task.assigned_user_secondary.name if task.assigned_user_secondary else '' }}"
          >
            {{ nav_icon('check') }}
            <span>Erledigen</span>
          </button>
        {% else %}
          <form method="post" action="{{ url_for('tasks.complete', task_id=task.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="completed_for" value="me">
            <button type="submit" class="button">
              {{ nav_icon('check') }}
              <span>Erledigen</span>
            </button>
          </form>
        {% endif %}
      {% else %}
        <span class="done-hint">Am {{ task.completed_at|datetime_de }}</span>
      {% endif %}
    </div>
  </article>
{%- endmacro %}