{# Plan der KI und Planungsmodus. Aktualisiert sich nach jeder Antwort. #}
<div id="plan" hx-get="/chats/{{ chat.id }}/plan" hx-trigger="aiw:run-done from:body" hx-swap="outerHTML">
  {% set steps = chat.plan or [] %}
  {% if steps or chat.plan_mode %}
  <section class="card aiw-plan">
    <div class="card-body stack stack-sm">
      <div class="aiw-changes-head">
        <div class="flex-1 min-w-0">
          <strong>Plan</strong>
          {% if chat.plan_mode %}<span class="badge badge-info">Planungsmodus: die KI ändert nichts</span>{% endif %}
          {% if steps %}<span class="text-xs text-muted">{{ steps|selectattr('status', 'equalto', 'done')|list|length }} von {{ steps|length }} erledigt</span>{% endif %}
        </div>
        <div class="cluster">
          {% if chat.plan_mode and steps %}
          <form method="post" action="/chats/{{ chat.id }}/plan/execute" data-confirm="Planungsmodus beenden und den Plan umsetzen lassen?">
            <input type="hidden" name="_csrf" value="{{ p.csrf }}">
            <button class="btn btn-primary btn-sm" type="submit">Plan umsetzen</button>
          </form>
          {% endif %}
        </div>
      </div>
      {% if steps %}
      <ol class="aiw-plan-list">
        {% for s in steps %}
        <li class="aiw-plan-{{ s.status }}"><span aria-hidden="true">{{ {'done': '✓', 'in_progress': '…', 'open': '○'}.get(s.status, '○') }}</span>
          <span>{{ s.text }}</span><span class="sr-only"> ({{ {'done': 'erledigt', 'in_progress': 'in Arbeit', 'open': 'offen'}.get(s.status, 'offen') }})</span></li>
        {% endfor %}
      </ol>
      {% else %}
      <p class="text-sm text-muted">Noch kein Plan. Beschreibe die Aufgabe; die KI untersucht sie und legt einen Plan an.</p>
      {% endif %}
    </div>
  </section>
  {% endif %}
</div>