{% from "macros.html" import actor, csrf_field with context %}
<div id="board" class="board" data-project="{{ project.key }}" data-query="{{ query }}"
     hx-get="/p/{{ project.key }}/board?since={{ token }}{% if query %}&{{ query }}{% endif %}"
     hx-trigger="every 10s" hx-swap="outerHTML">
  {% if error %}<p class="error" role="alert">{{ error }}</p>{% endif %}
  {% for c in project.columns %}
  <section class="column" aria-label="{{ c.name }}">
    <h2>{{ c.name }} <span class="muted">{{ by_column[c.id] | length }}</span>
      {% if c.human_only_entry %}<span class="badge gate" title="Human-gated: only a human or an admin moves tasks in">gated</span>{% endif %}
      {% if c.requires_resolution %}<span class="badge" title="Tasks here need a resolution">resolution</span>{% endif %}
    </h2>
    <ol class="cards" data-column="{{ c.id }}">
      {% for t in by_column[c.id] %}
      <li class="task-card" data-ref="{{ t.ref }}" tabindex="0">
        <a href="/t/{{ t.ref }}" hx-get="/t/{{ t.ref }}" hx-target="#panel" hx-swap="innerHTML" class="ref">{{ t.ref }}</a>
        <span class="title">{{ t.title }}</span>
        <div class="meta">
          {{ actor(t.assignee) }}
          {% for l in t.labels if l != "needs-input" %}<span class="label">{{ l }}</span>{% endfor %}
          {% if t.needs_input %}<span class="chip warn">Needs input</span>{% endif %}
          {% for b in t.blocked_by if not b.closed %}<span class="chip">blocked by {{ b.ref }}</span>{% endfor %}
          {% if t.claimed_by %}<span class="chip">@{{ t.claimed_by.handle }} · {{ t.claim_label }} · {{ t.claimed_at | ago }}</span>{% endif %}
          {% if t.comment_count %}<span class="muted">{{ t.comment_count }} comment{{ "s" if t.comment_count > 1 }}</span>{% endif %}
        </div>
      </li>
      {% endfor %}
    </ol>
    {% if not project.archived %}
    <details class="new-task">
      <summary>New task</summary>
      <form method="post" action="/p/{{ project.key }}/tasks">
        {{ csrf_field() }}
        <input type="hidden" name="column" value="{{ c.id }}">
        <input name="title" placeholder="Title" required maxlength="200" aria-label="Title">
        <button>Add</button>
      </form>
    </details>
    {% endif %}
  </section>
  {% endfor %}
</div>