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

<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="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3 board-toolbar">
  <div class="d-flex align-items-center gap-2">
    <button type="button" class="btn btn-sm btn-outline-secondary" id="board-new-board-btn">+ Board</button>
    <button type="button" class="btn btn-sm btn-outline-primary" id="board-new-sprint-btn">+ Sprint</button>
  </div>
</div>
<form id="board-new-form" class="d-none mb-3 d-flex flex-wrap gap-2 align-items-center" autocomplete="off">
  <input type="text" id="board-new-name" class="form-control form-control-sm" style="max-width: 260px;" placeholder="Board name" required>
  <button type="submit" class="btn btn-sm btn-primary">Create</button>
  <button type="button" id="board-new-cancel" class="btn btn-sm btn-link">Cancel</button>
  <span class="small text-danger d-none" id="board-new-error"></span>
</form>

<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>
      <div class="d-flex align-items-center gap-1">
        <span class="badge bg-light text-dark border board-column-points-total" title="Sprint points in this column">{{ col.points_total | default(0) }} pts</span>
        <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>
    <div class="board-column-cards d-flex flex-column">
      {% for task in col.tasks %}
      {% include "board_card.html" %}
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>

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