{# Kanban board component (KanbanComponent in components.py; usage docs in
   manual/kanban.org).

   The baseline works without JavaScript:

   * Move / sort — the grip link on a card re-renders the view with
     ``?move=<card_id>`` (the page passes it back as ``moving_id``); every
     eligible gap then offers a "move here" POST form to the place endpoint
     (fields: item_id, column_id, position, next).
   * Quick-add — each opted-in column ends in a one-field form posting
     column_id, name and next to the add endpoint.

   With JavaScript, static/js/kanban-dnd.js layers drag-and-drop on the same
   markup: it reads data-place-url / data-csrf off the root, drags
   .kanban-card[data-item-id] between .kanban-cards zones (keyed by
   data-column-id) and posts to the same place endpoint. The no-JS controls
   stay rendered — they remain the keyboard-accessible path.

   With an sse_url the root carries the construct live client's data-live-*
   attributes: the stream's done event reloads the view with fresh data. #}
<div{% if c.id %} id="{{ c.id }}"{% endif %} class="kanban{% if c.css_class %} {{ c.css_class }}{% endif %}"
     {%- if place_url %} data-place-url="{{ place_url }}" data-csrf="{{ csrf_token }}"{% endif %}
     {%- if live_attrs %} {{ live_attrs }}{% endif %}>
  {% if live_attrs %}
    {# Content sink required by the live client; the watch stream's only job
       is the reload-triggering done event. #}
    <div id="{{ watch_id }}" hidden></div>
  {% endif %}
  <div class="kanban-columns">
    {% for col in column_data %}
      {% set column = col.column %}
      <section class="kanban-column{% if column.css_class %} {{ column.css_class }}{% endif %}">
        <h2>{{ column.title }}
          <span class="kanban-count">{{ column.cards|length }}</span>
        </h2>

        <div class="kanban-cards" data-column-id="{{ column.id }}">
        {% for kind, payload in col.entries %}
          {% if kind == "slot" %}
            <form method="post" action="{{ place_url }}" class="kanban-slot-form">
              {{ csrf_field }}
              <input type="hidden" name="item_id" value="{{ moving.id }}"/>
              <input type="hidden" name="column_id" value="{{ column.id }}"/>
              <input type="hidden" name="position" value="{{ payload }}"/>
              <input type="hidden" name="next" value="{{ next_path }}"/>
              <button type="submit" class="kanban-slot">{{ t.move_here }}</button>
            </form>
          {% else %}
            {% set card = payload %}
            {% set is_moving = moving and card.id == moving.id %}
            <article class="kanban-card{% if is_moving %} kanban-card--moving{% endif %}{% if card.css_class %} {{ card.css_class }}{% endif %}"
                     {% if place_url %}data-item-id="{{ card.id }}"{% endif %}>
              {# Top strip: the grip is both the no-JS move entry point and,
                 in JS mode, the drag handle (starting a drag never fires the
                 click). #}
              {% if place_url %}
                {% if is_moving %}
                  <a href="{{ cancel_href }}" class="kanban-card-grip kanban-card-grip--cancel">
                    {{ t.move_cancel }}</a>
                {% elif not moving %}
                  <a href="{{ move_href_base }}{{ card.id }}" class="kanban-card-grip"
                     title="{{ t.move }}" aria-label="{{ t.move }}">
                    <span class="kanban-grip-dots" aria-hidden="true"></span>
                  </a>
                {% endif %}
              {% endif %}
              {% if card.close_action and not moving %}
                <form method="post" action="{{ card.close_action.url }}"
                      class="kanban-card-close">
                  {{ csrf_field }}
                  {% for fname, fval in card.close_action.fields.items() %}
                    <input type="hidden" name="{{ fname }}" value="{{ fval }}"/>
                  {% endfor %}
                  <input type="hidden" name="next" value="{{ next_path }}"/>
                  <button type="submit" class="kanban-close-btn"
                          title="{{ card.close_action.tooltip or card.close_action.label }}"
                          aria-label="{{ card.close_action.tooltip or card.close_action.label }}">×</button>
                </form>
              {% endif %}
              <div class="kanban-card-title">
                {% if card.url %}<a href="{{ card.url }}">{{ card.title }}</a>
                {% else %}{{ card.title }}{% endif %}
                {% for badge in card.badges %}
                  <span class="kanban-badge">{{ badge }}</span>
                {% endfor %}
              </div>
              {% if card.meta %}
                <div class="kanban-card-meta">
                  {% for entry in card.meta %}
                    {% if entry is string %}<span>{{ entry }}</span>
                    {% else %}<span title="{{ entry[1] }}">{{ entry[0] }}</span>{% endif %}
                  {% endfor %}
                </div>
              {% endif %}
              {% if card.people %}
                <div class="kanban-card-people">
                  {% for entry in card.people %}
                    {% if entry is string %}<span class="kanban-person">{{ entry }}</span>
                    {% else %}<span class="kanban-person" title="{{ entry[1] }}">{{ entry[0] }}</span>{% endif %}
                  {% endfor %}
                </div>
              {% endif %}
              {% if card.actions and not moving %}
                <div class="kanban-card-actions">
                  {% for action in card.actions %}
                    <form method="post" action="{{ action.url }}" class="kanban-action">
                      {{ csrf_field }}
                      {% for fname, fval in action.fields.items() %}
                        <input type="hidden" name="{{ fname }}" value="{{ fval }}"/>
                      {% endfor %}
                      <input type="hidden" name="next" value="{{ next_path }}"/>
                      <button type="submit"
                              class="fcu-btn fcu-btn--{{ action.variant }} kanban-btn"
                              {% if action.tooltip %}title="{{ action.tooltip }}"{% endif %}>
                        {{ action.label }}</button>
                    </form>
                  {% endfor %}
                </div>
              {% endif %}
            </article>
          {% endif %}
        {% else %}
          <p class="kanban-empty-col">—</p>
        {% endfor %}
        </div>

        {% if col.quick_add and not moving %}
          <form method="post" action="{{ add_url }}" class="kanban-add">
            {{ csrf_field }}
            <input type="hidden" name="column_id" value="{{ column.id }}"/>
            <input type="hidden" name="next" value="{{ next_path }}"/>
            <input type="text" name="name" required maxlength="{{ c.add_max_length }}"
                   class="fcu-form-control"
                   placeholder="{{ t.add_placeholder }}"/>
            <button type="submit" class="fcu-btn fcu-btn--secondary kanban-btn">
              + {{ t.add_label }}</button>
          </form>
        {% endif %}
      </section>
    {% endfor %}
  </div>
</div>