{# 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 flex-wrap">
  <a href="{{ project_url }}" class="text-reset">{{ project }}</a>
  <span class="text-muted">/</span>
  <label class="visually-hidden" for="board-board-select">Board</label>
  <select id="board-board-select" class="form-select form-select-sm board-board-select" aria-label="Board" style="width: auto; min-width: 10rem;">
    <option value="{{ board_name }}" selected>{{ board_name }}</option>
  </select>
  <span class="text-muted">board</span>
</h1>

<div class="board-columns d-flex gap-3 overflow-auto pb-2" style="min-height: 70vh;" data-project="{{ project }}" data-board="{{ board_name }}">
  {% 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="board-column-header-control board-column-add-card" aria-label="Add task">
        <span class="board-column-add-label">(+ Add Task)</span>
        <span class="board-column-task-count">{{ col.tasks | length }}</span>
      </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-refs.js"></script>
<script src="/static/board.js"></script>