{# Inner Kanban columns — extracted from pipeline/index.html so the
   SSE-driven pipeline.board_fragment route can re-render the board live.
   Required context: columns (list of dicts) — see pipeline._build_columns.

   NOTE: the page re-initialises SortableJS on htmx:afterSettle after this
   fragment swaps in (the .kanban-column-body bindings are torn down by the
   innerHTML swap and must be re-attached). #}
{% for col in columns %}
<div class="flex-none w-72 flex flex-col bg-slate-800 rounded-xl border border-slate-700">

  <!-- Column header -->
  <div class="flex items-center justify-between px-4 py-3 border-b border-slate-700">
    <span class="font-semibold text-slate-200 text-sm">{{ col.label }}</span>
    <span class="text-xs bg-slate-700 text-slate-300 rounded-full px-2 py-0.5 font-mono">
      {{ col.jobs | length }}
    </span>
  </div>

  {% if col.status == 'rejected' %}
    <!-- Rejected column: collapsed by default, expand toggle -->
    <div id="rejected-toggle-bar"
         class="flex items-center justify-between px-4 py-2 cursor-pointer hover:bg-slate-700/50 transition-colors"
         role="button"
         aria-expanded="false"
         aria-controls="rejected-body"
         onclick="toggleRejected()">
      <span class="text-xs text-slate-400">
        <span id="rejected-toggle-label">Show {{ col.jobs | length }} rejected</span>
      </span>
      <svg id="rejected-chevron"
           class="w-4 h-4 text-slate-400 transition-transform duration-200 rotate-0"
           fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </div>

    <!-- Card list: hidden by default for rejected -->
    <div id="rejected-body"
         class="kanban-column-body flex-1 overflow-y-auto p-2 space-y-2 hidden"
         data-status="{{ col.status }}">
      {% for job in col.jobs %}
        {% include "pipeline/_card.html" %}
      {% endfor %}
      <p data-empty-placeholder class="text-slate-600 text-xs text-center py-4 {% if col.jobs %}hidden{% endif %}">Empty</p>
    </div>

  {% else %}
    <!-- Normal column: cards always visible -->
    <div class="kanban-column-body flex-1 overflow-y-auto p-2 space-y-2"
         data-status="{{ col.status }}">
      {% for job in col.jobs %}
        {% include "pipeline/_card.html" %}
      {% endfor %}
      <p data-empty-placeholder class="text-slate-600 text-xs text-center py-4 {% if col.jobs %}hidden{% endif %}">Empty</p>
    </div>

  {% endif %}

</div>
{% endfor %}