{% with ei=aufgabe.external_issue %}
<div class="space-y-2 text-sm">
  <div class="flex items-center gap-2 flex-wrap">
    <!-- Backend-Badge -->
    {% if ei.issue_facade_backend == 'local' %}
    <span class="text-xs bg-slate-100 text-slate-600 rounded px-1.5 py-0.5 font-medium">LOKAL</span>
    {% else %}
    <span class="text-xs bg-blue-100 text-blue-700 rounded px-1.5 py-0.5 font-medium">GITEA</span>
    {% endif %}

    <!-- Issue-Key -->
    {% if ei.issue_url %}
    <a href="{{ ei.issue_url }}" target="_blank" rel="noopener"
       class="text-xs font-mono text-blue-600 hover:underline">{{ ei.issue_key }}</a>
    {% else %}
    <span class="text-xs font-mono text-slate-600">{{ ei.issue_key }}</span>
    {% endif %}

    <!-- Status-Badge -->
    <span class="text-xs rounded px-1.5 py-0.5
      {% if ei.sync_status == 'closed' %}bg-green-100 text-green-700
      {% elif ei.sync_status == 'in_progress' %}bg-amber-100 text-amber-700
      {% elif ei.sync_status == 'blocked' %}bg-red-100 text-red-700
      {% elif ei.sync_status == 'error' %}bg-red-200 text-red-800
      {% else %}bg-slate-100 text-slate-600{% endif %}">
      {{ ei.get_sync_status_display }}
    </span>

    <!-- Letzter Sync -->
    {% if ei.letzter_sync %}
    <span class="text-xs text-slate-400 ml-auto">Sync: {{ ei.letzter_sync|date:"d.m.Y H:i" }}</span>
    {% endif %}
  </div>

  {% if ei.notizen %}
  <p class="text-xs text-slate-500 whitespace-pre-wrap">{{ ei.notizen }}</p>
  {% endif %}

  {% if push_error %}
  <p class="text-xs text-red-600">{{ push_error }}</p>
  {% endif %}

  <div class="flex gap-2 flex-wrap mt-1">
    <!-- Bearbeiten -->
    <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>

    <!-- Push to Gitea (nur wenn lokal und Gitea konfiguriert) -->
    {% if ei.issue_facade_backend == 'local' and gitea_configured %}
    <form hx-post="{% url 'ausschreibungen:aufgaben:external_issue_push' ausschreibung.pk aufgabe.pk %}"
          hx-target="#external-issue-panel" hx-swap="innerHTML">
      {% csrf_token %}
      <button type="submit" class="btn-ghost text-xs text-blue-600">↑ Nach Gitea</button>
    </form>
    {% endif %}

    <!-- Status syncen -->
    <form hx-post="{% url 'ausschreibungen:aufgaben:external_issue_sync' ausschreibung.pk aufgabe.pk %}"
          hx-target="#external-issue-panel" hx-swap="innerHTML">
      {% csrf_token %}
      <button type="submit" class="btn-ghost text-xs">⟳ Status syncen</button>
    </form>

    <!-- Entfernen -->
    <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 %}