{% with ei=aufgabe.external_issue %}
<div class="space-y-1 text-sm">
  <div class="flex items-center gap-2">
    <span class="text-xs bg-slate-100 text-slate-600 rounded px-1.5 py-0.5 font-medium">{{ ei.get_system_display }}</span>
    {% if ei.issue_key %}<span class="text-slate-700 font-mono text-xs">{{ ei.issue_key }}</span>{% endif %}
    <span class="text-xs text-slate-400 ml-auto">{{ ei.get_sync_status_display }}</span>
  </div>
  {% if ei.issue_url %}
  <a href="{{ ei.issue_url }}" target="_blank" rel="noopener"
     class="text-xs text-blue-600 hover:underline break-all">{{ ei.issue_url }}</a>
  {% endif %}
  {% if ei.notizen %}
  <p class="text-xs text-slate-500 whitespace-pre-wrap">{{ ei.notizen }}</p>
  {% endif %}
  <div class="flex gap-2 mt-2">
    <button class="btn-ghost text-xs"
            hx-get="{% url 'ausschreibungen:aufgaben:external_issue' ausschreibung.pk aufgabe.pk %}"
            hx-target="#external-issue-panel"
            hx-swap="innerHTML">Bearbeiten</button>
    <form hx-post="{% url 'ausschreibungen:aufgaben:external_issue_loeschen' ausschreibung.pk aufgabe.pk %}"
          hx-target="#external-issue-panel"
          hx-swap="innerHTML"
          hx-confirm="Externe Verknüpfung entfernen?">
      {% csrf_token %}
      <button type="submit" class="btn-ghost text-xs text-red-500">Entfernen</button>
    </form>
  </div>
</div>
{% endwith %}