{% extends "base.html" %}

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

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

<form method="get" action="/tasks"
      hx-get="/tasks"
      hx-trigger="change from:#status-hidden-input, change from:#priority-hidden-input, change from:#tag-hidden-input, keyup changed delay:300ms from:input[name='search']"
      hx-target="#content-area"
      hx-select="#content-area"
      hx-swap="outerHTML"
      hx-push-url="true">
  <div class="grid">
    <div class="filter-multiselect" id="status-multiselect">
      <div class="filter-multiselect-trigger" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-label="Filter by status">
        <span class="filter-multiselect-pills"></span>
        <span class="filter-multiselect-placeholder">All statuses</span>
      </div>
      <ul class="filter-multiselect-dropdown" role="listbox" aria-multiselectable="true" hidden>
        <li role="option" data-value="open" data-label="○ Open" data-badge-class="status-open"><span class="badge status-open">○ Open</span></li>
        <li role="option" data-value="in_progress" data-label="◐ In Progress" data-badge-class="status-in_progress"><span class="badge status-in_progress">◐ In Progress</span></li>
        <li role="option" data-value="done" data-label="✓ Done" data-badge-class="status-done"><span class="badge status-done">✓ Done</span></li>
        <li role="option" data-value="blocked" data-label="⊘ Blocked" data-badge-class="status-blocked"><span class="badge status-blocked">⊘ Blocked</span></li>
      </ul>
      <input type="hidden" name="status" id="status-hidden-input" value="{{ status_filter.as_deref().unwrap_or_default() }}">
    </div>
    <div class="filter-multiselect" id="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="priority-hidden-input" value="{{ priority_filter.as_deref().unwrap_or_default() }}">
    </div>
    <div class="tag-multiselect" id="tag-multiselect">
      <div class="tag-multiselect-trigger" id="tag-multiselect-trigger" role="button" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-label="Filter by tag">
        <span class="tag-multiselect-pills" id="tag-multiselect-pills">
          {% for tag in &selected_tags %}
          <span class="filter-tag-pill" data-tag="{{ tag }}">
            <span class="filter-tag-pill-text">{{ tag }}</span>
            <button class="filter-tag-pill-remove" type="button" aria-label="Remove {{ tag }} filter" data-remove-tag="{{ tag }}">&times;</button>
          </span>
          {% endfor %}
        </span>
        <span class="tag-multiselect-placeholder" id="tag-multiselect-placeholder"{% if !selected_tags.is_empty() %} style="display:none"{% endif %}>Filter by tag</span>
        <span class="tag-multiselect-caret">&#9660;</span>
      </div>
      <ul class="tag-multiselect-dropdown" id="tag-multiselect-dropdown" hidden role="listbox" aria-multiselectable="true">
        {% if all_tags.is_empty() %}
        <li class="tag-dropdown-empty">No tags</li>
        {% else %}
        {% for tag in &all_tags %}
        <li class="tag-dropdown-option {% if selected_tags.contains(tag) %}selected{% endif %}"
            role="option"
            aria-selected="{% if selected_tags.contains(tag) %}true{% else %}false{% endif %}"
            data-tag="{{ tag }}">
          <span class="tag-pill">{{ tag }}</span>
          {% if selected_tags.contains(tag) %}<span class="tag-check">&#10003;</span>{% endif %}
        </li>
        {% endfor %}
        {% endif %}
      </ul>
      <input type="hidden" name="tag" value="{{ tag_filter.as_deref().unwrap_or_default() }}" id="tag-hidden-input">
    </div>
    <div role="search" style="position:relative">
      <label for="search-input" class="sr-only">Search tasks by title</label>
      <input type="text" id="search-input" name="search" placeholder="Search titles..." value="{{ search_filter.as_deref().unwrap_or_default() }}" aria-label="Search tasks by title" data-shortcut="/ to focus">
    </div>
    <noscript><button type="submit">Filter</button></noscript>
  </div>
</form>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Status</th>
      <th>Priority</th>
      <th>Tags</th>
      <th>Updated</th>
    </tr>
  </thead>
  <tbody hx-get="/tasks{{ poll_query }}"
         hx-trigger="every 2s [document.visibilityState === 'visible']"
         hx-select="tbody"
         hx-swap="outerHTML show:none"
         aria-live="polite"
         aria-atomic="false">
    {% if tasks.is_empty() %}
    <tr>
      <td colspan="6" style="text-align:center;color:var(--pico-muted-color);padding:2rem 0">
        {%- if has_filters -%}
        No tasks match your filters
        {%- else -%}
        No tasks yet — create one to get started
        {%- endif -%}
      </td>
    </tr>
    {% else %}
    {% for row in tasks %}
    <tr tabindex="-1" data-href="/tasks/{{ row.task.id }}">
      <td><a href="/tasks/{{ row.task.id }}"
             hx-get="/tasks/{{ row.task.id }}"
             hx-target="#task-modal"
             hx-select="unset"
             hx-swap="innerHTML">{{ row.task.id }}</a></td>
      <td>
        <span data-editable data-field="title" data-task-id="{{ row.task.id }}">{{ row.task.title }}</span>
        {% if row.children_total > 0 %}
        <span class="subtask-count" title="{{ row.children_done }} of {{ row.children_total }} subtasks done">{{ row.children_done }}/{{ row.children_total }}</span>
        {% endif %}
        {% if let (Some(pid), Some(ptitle)) = (row.parent_id.as_deref(), row.parent_title.as_deref()) %}
        <a href="/epics/{{ pid }}" class="epic-badge">{{ pid }}: {{ ptitle }}</a>
        {% endif %}
      </td>
      <td data-editable data-field="status" data-task-id="{{ row.task.id }}"><span class="badge status-{{ row.task.status }}">
        {%- if row.task.status == crate::models::Status::Open -%}○ Open
        {%- else if row.task.status == crate::models::Status::InProgress -%}◐ In Progress
        {%- else if row.task.status == crate::models::Status::Done -%}✓ Done
        {%- else -%}⊘ Blocked{%- endif -%}
      </span></td>
      <td data-editable data-field="priority" data-task-id="{{ row.task.id }}"><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></td>
      <td data-editable data-field="tags" data-task-id="{{ row.task.id }}">{% for tag in &row.task.tags %}<span class="tag-pill">{{ tag }}</span> {% endfor %}</td>
      <td class="col-updated">{{ row.task.updated_at.format("%b %d %H:%M") }}</td>
    </tr>
    {% endfor %}
    {% endif %}
  </tbody>
</table>
</div>
{% endblock %}