{% extends "base.html" %}
{% block content %}
{# 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>

{% from "macros.html" import page_header %}
{% call page_header(project, "Board") %}
<label class="visually-hidden" for="board-board-select">Board</label>
<select id="board-board-select" class="form-select board-board-select" aria-label="Board" style="width: auto; min-width: 10rem;">
  <option value="{{ board_name }}" selected>{{ board_name }}</option>
</select>
<button type="button" class="btn btn-outline-secondary" id="board-new-board-btn">New board</button>
<button type="button" class="btn btn-primary" id="board-new-sprint-btn">New sprint</button>
{% endcall %}
<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="card board-column flex-shrink-0 dropzone"
       data-status="{{ col.status }}"
       style="min-width: 280px; width: 280px;">
    <div class="card-header d-flex align-items-center justify-content-between">
      <h3 class="card-title mb-0">{{ col.label }}</h3>
      <div class="d-flex align-items-center gap-1">
        <span class="badge bg-blue-lt board-column-points-total" title="Sprint points in this column">{{ col.points_total | default(0) }} pts</span>
        <button type="button" class="btn btn-ghost-primary btn-sm 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="card-body board-column-cards d-flex flex-column">
      {% for task in col.tasks %}
      {% include "board_card.html" %}
      {% endfor %}
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}
{% block scripts %}
<script defer src="/static/vendor/showdown-2.1.0.min.js"></script>
<script type="module" src="/static/board.js"></script>
{% endblock %}