{# Board view: columns (dropzones) and task cards. Expects: project, project_url, board_name, board_url, columns [ { status, label, tasks } ] #}

<template id="board-card-template">
  {% include "board_card.html" without context %}
</template>

<h1 class="page-title d-flex align-items-center gap-2">
  <a href="{{ project_url }}" class="text-reset">{{ project }}</a>
  <span class="text-muted">/</span>
  <span>{{ board_name }} board</span>
</h1>

<div class="board-columns d-flex gap-3 overflow-auto pb-2" style="min-height: 70vh;">
  {% for col in columns %}
  <div class="board-column flex-shrink-0 rounded border p-2 dropzone"
       data-status="{{ col.status }}"
       style="min-width: 280px; width: 280px;">
    <div class="d-flex align-items-center justify-content-between mb-2">
      <h3 class="h6 mb-0 text-muted">{{ col.label }}</h3>
      <button type="button" class="badge bg-secondary border-0 board-column-add-card" aria-label="Add card">{{ col.tasks | length }}</button>
    </div>
    <div class="board-column-cards d-flex flex-column">
      {% for task in col.tasks %}
      {% include "board_card.html" %}
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>

<script src="/static/board.js"></script>