{% load vergabe_tags %}
<div class="border-t border-slate-200 p-3">
  <p class="text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2 truncate"
     title="{{ current_ausschreibung.titel }}">
    {{ current_ausschreibung.titel|truncatechars:30 }}
  </p>
  {% for phase in phases %}
  <a href="{{ phase.url }}"
     class="flex items-center gap-2 px-2 py-1.5 rounded text-sm hover:bg-slate-100
            {% if phase.aktiv %}text-brand-700 font-medium{% else %}text-slate-600{% endif %}">
    <span class="{% if phase.erledigt %}phase-done{% elif phase.aktiv %}phase-active{% elif phase.warnung %}phase-warn{% else %}phase-todo{% endif %}
                 shrink-0 text-xs">
      {{ phase.nummer }}
    </span>
    <span class="truncate">{{ phase.name }}</span>
    {% if phase.aufgaben_score.total %}
    <span class="ml-auto text-slate-400 text-xs shrink-0">{{ phase.aufgaben_score.abgeschlossen }}/{{ phase.aufgaben_score.total }}</span>
    {% elif phase.warnung %}
    <span class="ml-auto text-amber-500 text-xs shrink-0">⚠</span>
    {% endif %}
  </a>
  {% endfor %}
</div>