{% extends "base.html" %}

{% block title %}Board — Tacks{% endblock %}

{% block content %}
<div id="content-area">

<form method="get" action="/board"
      hx-get="/board"
      hx-trigger="change from:#board-epic-hidden-input, change from:#board-priority-hidden-input"
      hx-target="#content-area"
      hx-select="#content-area"
      hx-swap="outerHTML"
      hx-push-url="true">
  <div class="grid">
    <div class="filter-multiselect" id="board-epic-multiselect">
      <div class="filter-multiselect-trigger" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-label="Filter by epic">
        <span class="filter-multiselect-pills"></span>
        <span class="filter-multiselect-placeholder">All epics</span>
      </div>
      <ul class="filter-multiselect-dropdown" role="listbox" aria-multiselectable="true" hidden>
        {% for epic in epics %}
        <li role="option" data-value="{{ epic.id }}" data-label="{{ epic.title }}" data-badge-class=""><span>{{ epic.title }}</span></li>
        {% endfor %}
      </ul>
      <input type="hidden" name="epic" id="board-epic-hidden-input" value="{{ selected_epic }}">
    </div>
    <div class="filter-multiselect" id="board-priority-multiselect">
      <div class="filter-multiselect-trigger" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-label="Filter by priority">
        <span class="filter-multiselect-pills"></span>
        <span class="filter-multiselect-placeholder">All priorities</span>
      </div>
      <ul class="filter-multiselect-dropdown" role="listbox" aria-multiselectable="true" hidden>
        <li role="option" data-value="1" data-label="▲ P1" data-badge-class="priority-1"><span class="badge priority-1">▲ P1</span></li>
        <li role="option" data-value="2" data-label="▬ P2" data-badge-class="priority-2"><span class="badge priority-2">▬ P2</span></li>
        <li role="option" data-value="3" data-label="▽ P3" data-badge-class="priority-3"><span class="badge priority-3">▽ P3</span></li>
        <li role="option" data-value="4" data-label="· P4" data-badge-class="priority-4"><span class="badge priority-4">· P4</span></li>
      </ul>
      <input type="hidden" name="priority" id="board-priority-hidden-input" value="{{ selected_priority }}">
    </div>
    <noscript><button type="submit">Filter</button></noscript>
  </div>
</form>

<div class="grid" id="board-columns"
     hx-get="/board{{ poll_query }}"
     hx-trigger="every 2s [document.visibilityState === 'visible']"
     hx-target="#board-columns"
     hx-select="#board-columns"
     hx-swap="outerHTML show:none"
     aria-live="polite"
     aria-atomic="false">
  <div class="board-column" data-status="open">
    <h2>Open <span class="column-count">({{ open_tasks.len() }})</span></h2>
    {% for row in open_tasks %}
    <article class="board-card" draggable="true" data-task-id="{{ row.task.id }}" tabindex="0" data-shortcut="Shift+→ to move right">
      <div class="board-card-header">
        <a href="/tasks/{{ row.task.id }}"
           hx-get="/tasks/{{ row.task.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ row.task.title }}</a>
        <span class="badge priority-{{ row.task.priority }}">
          {%- if row.task.priority == 1 -%}▲ P1{%- else if row.task.priority == 2 -%}▬ P2{%- else if row.task.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
      {% if row.blocked_count > 0 %}
      <div class="board-card-blocked">
        <span class="badge dep-blocked" title="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}" aria-label="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}">⊘ Blocked</span>
      </div>
      {% endif %}
    </article>
    {% endfor %}
  </div>
  <div class="board-column" data-status="in_progress">
    <h2>In Progress <span class="column-count">({{ in_progress_tasks.len() }})</span></h2>
    {% for row in in_progress_tasks %}
    <article class="board-card" draggable="true" data-task-id="{{ row.task.id }}" tabindex="0" data-shortcut="Shift+←/→ to move">
      <div class="board-card-header">
        <a href="/tasks/{{ row.task.id }}"
           hx-get="/tasks/{{ row.task.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ row.task.title }}</a>
        <span class="badge priority-{{ row.task.priority }}">
          {%- if row.task.priority == 1 -%}▲ P1{%- else if row.task.priority == 2 -%}▬ P2{%- else if row.task.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
      {% if row.blocked_count > 0 %}
      <div class="board-card-blocked">
        <span class="badge dep-blocked" title="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}" aria-label="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}">⊘ Blocked</span>
      </div>
      {% endif %}
    </article>
    {% endfor %}
  </div>
  <div class="board-column" data-status="blocked">
    <h2>Blocked <span class="column-count">({{ blocked_tasks.len() }})</span></h2>
    {% for row in blocked_tasks %}
    <article class="board-card" draggable="true" data-task-id="{{ row.task.id }}" tabindex="0">
      <div class="board-card-header">
        <a href="/tasks/{{ row.task.id }}"
           hx-get="/tasks/{{ row.task.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ row.task.title }}</a>
        <span class="badge priority-{{ row.task.priority }}">
          {%- if row.task.priority == 1 -%}▲ P1{%- else if row.task.priority == 2 -%}▬ P2{%- else if row.task.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
      {% if row.blocked_count > 0 %}
      <div class="board-card-blocked">
        <span class="badge dep-blocked" title="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}" aria-label="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}">⊘ Blocked</span>
      </div>
      {% endif %}
    </article>
    {% endfor %}
  </div>
  <div class="board-column" data-status="done">
    <h2>Done <span class="column-count">({{ done_tasks.len() }})</span></h2>
    {% for row in done_tasks %}
    <article class="board-card" draggable="true" data-task-id="{{ row.task.id }}" tabindex="0" data-shortcut="Shift+← to move left">
      <div class="board-card-header">
        <a href="/tasks/{{ row.task.id }}"
           hx-get="/tasks/{{ row.task.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ row.task.title }}</a>
        <span class="badge priority-{{ row.task.priority }}">
          {%- if row.task.priority == 1 -%}▲ P1{%- else if row.task.priority == 2 -%}▬ P2{%- else if row.task.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
      {% if row.blocked_count > 0 %}
      <div class="board-card-blocked">
        <span class="badge dep-blocked" title="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}" aria-label="Blocked by {{ row.blocked_count }} {% if row.blocked_count == 1 %}task{% else %}tasks{% endif %}">⊘ Blocked</span>
      </div>
      {% endif %}
    </article>
    {% endfor %}
  </div>
</div>
{% if open_tasks.is_empty() && in_progress_tasks.is_empty() && blocked_tasks.is_empty() && done_tasks.is_empty() %}
<p style="text-align:center;color:var(--pico-muted-color);padding:2rem 0">No tasks match your filters</p>
{% endif %}
</div>
{% endblock %}