{% macro task_section(project_name, section, all_labels, redirect_url) %}
  <form method="get" action="/projects/{{ project_name }}" class="hstack gap-2 mt-2 mb-4">
    <div data-field>
      <label for="{{ section.sort_ctx.prefix }}filter-priority">Priority</label>
      <select id="{{ section.sort_ctx.prefix }}filter-priority" name="{{ section.sort_ctx.prefix }}priority" aria-label="Filter by priority">
        <option value="">All</option>
        <option value="high"{% if section.filter_priority.as_deref() == Some("high") %} selected{% endif %}>High</option>
        <option value="medium"{% if section.filter_priority.as_deref() == Some("medium") %} selected{% endif %}>Medium</option>
        <option value="low"{% if section.filter_priority.as_deref() == Some("low") %} selected{% endif %}>Low</option>
      </select>
    </div>
    <div data-field>
      <label for="{{ section.sort_ctx.prefix }}filter-effort">Effort</label>
      <select id="{{ section.sort_ctx.prefix }}filter-effort" name="{{ section.sort_ctx.prefix }}effort" aria-label="Filter by effort">
        <option value="">All</option>
        <option value="low"{% if section.filter_effort.as_deref() == Some("low") %} selected{% endif %}>Low</option>
        <option value="medium"{% if section.filter_effort.as_deref() == Some("medium") %} selected{% endif %}>Medium</option>
        <option value="high"{% if section.filter_effort.as_deref() == Some("high") %} selected{% endif %}>High</option>
      </select>
    </div>
    <div data-field>
      <label for="{{ section.sort_ctx.prefix }}filter-label">Label</label>
      <select id="{{ section.sort_ctx.prefix }}filter-label" name="{{ section.sort_ctx.prefix }}label" aria-label="Filter by label">
        <option value="">All</option>
        {% for l in all_labels %}
        <option value="{{ l }}"{% if section.filter_label.as_deref() == Some(l.as_str()) %} selected{% endif %}>{{ l }}</option>
        {% endfor %}
      </select>
    </div>
    <div data-field>
      <label for="{{ section.sort_ctx.prefix }}filter-type">Type</label>
      <select id="{{ section.sort_ctx.prefix }}filter-type" name="{{ section.sort_ctx.prefix }}type" aria-label="Filter by type">
        <option value="">All</option>
        <option value="task"{% if section.filter_type.as_deref() == Some("task") %} selected{% endif %}>Task</option>
        <option value="bug"{% if section.filter_type.as_deref() == Some("bug") %} selected{% endif %}>Bug</option>
        <option value="feature"{% if section.filter_type.as_deref() == Some("feature") %} selected{% endif %}>Feature</option>
      </select>
    </div>
    <div data-field>
      <label for="{{ section.sort_ctx.prefix }}filter-search">Search</label>
      <input type="text" id="{{ section.sort_ctx.prefix }}filter-search" name="{{ section.sort_ctx.prefix }}q" value="{{ section.filter_search }}" placeholder="Search titles…" aria-label="Search tasks by title">
    </div>
    {# Preserve other sections' state as hidden fields when this form submits #}
    {% let preserve = section.sort_ctx.preserve_qs %}
    {% if !preserve.is_empty() %}
    {% for pair in preserve.split('&') %}
    {% let kv = pair.splitn(2, '=').collect::<Vec<_>>() %}
    {% if kv.len() == 2 %}
    <input type="hidden" name="{{ kv[0] }}" value="{{ kv[1] }}">
    {% endif %}
    {% endfor %}
    {% endif %}
    <input type="hidden" name="{{ section.sort_ctx.prefix }}sort" value="{{ section.sort_ctx.field }}">
    <input type="hidden" name="{{ section.sort_ctx.prefix }}order" value="{{ section.sort_ctx.order }}">
    <button type="submit" class="outline">Filter</button>
  </form>

  {% if section.tasks.is_empty() %}
  <p class="text-light">No tasks match the current filters.</p>
  {% else %}
  <div class="table">
    <table>
      <caption class="sr-only">{{ section.label }} tasks for project</caption>
      <thead>
        <tr>
          <th scope="col"><a href="{{ section.sort_ctx.column_href("id") }}">ID{{ section.sort_ctx.arrow("id") }}</a></th>
          <th scope="col"><a href="{{ section.sort_ctx.column_href("type") }}">Type{{ section.sort_ctx.arrow("type") }}</a></th>
          <th scope="col"><a href="{{ section.sort_ctx.column_href("priority") }}">Priority{{ section.sort_ctx.arrow("priority") }}</a></th>
          <th scope="col"><a href="{{ section.sort_ctx.column_href("effort") }}">Effort{{ section.sort_ctx.arrow("effort") }}</a></th>
          <th scope="col"><a href="{{ section.sort_ctx.column_href("title") }}">Title{{ section.sort_ctx.arrow("title") }}</a></th>
          <th scope="col">Labels</th>
          <th scope="col"><a href="{{ section.sort_ctx.column_href("created") }}">Created{{ section.sort_ctx.arrow("created") }}</a></th>
          <th scope="col">Change status</th>
        </tr>
      </thead>
      <tbody>
        {% for t in section.tasks %}
        <tr>
          <td><a href="/projects/{{ project_name }}/tasks/{{ t.full_id }}"><code>{{ t.short_id }}</code></a></td>
          <td>{{ t.task_type }}</td>
          <td>{{ t.priority }}</td>
          <td>{{ t.effort }}</td>
          <td>{{ t.title }}</td>
          <td>{% for l in t.labels %}{% if !loop.first %}, {% endif %}{{ l }}{% endfor %}</td>
          <td><time datetime="{{ t.created_at }}">{{ t.created_at_display }}</time></td>
          <td>
            <ot-dropdown>
              <button popovertarget="{{ section.sort_ctx.prefix }}status-{{ t.short_id }}" class="outline small" aria-label="Change status of {{ t.short_id }}, currently {{ t.status_display }}">
                {{ t.status_display }}
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
              </button>
              <menu popover id="{{ section.sort_ctx.prefix }}status-{{ t.short_id }}">
                <button role="menuitemradio" aria-checked="{{ t.status == "open" }}" {% if t.status == "open" %}disabled{% else %}form="{{ section.sort_ctx.prefix }}set-open-{{ t.short_id }}"{% endif %}>Open</button>
                <button role="menuitemradio" aria-checked="{{ t.status == "in_progress" }}" {% if t.status == "in_progress" %}disabled{% else %}form="{{ section.sort_ctx.prefix }}set-in-progress-{{ t.short_id }}"{% endif %}>In progress</button>
                <button role="menuitemradio" aria-checked="{{ t.status == "closed" }}" {% if t.status == "closed" %}disabled{% else %}form="{{ section.sort_ctx.prefix }}set-closed-{{ t.short_id }}"{% endif %}>Closed</button>
              </menu>
            </ot-dropdown>
            {% if t.status != "open" %}
            <form id="{{ section.sort_ctx.prefix }}set-open-{{ t.short_id }}" method="post" action="/projects/{{ project_name }}/tasks/{{ t.full_id }}" hidden>
              <input type="hidden" name="status" value="open">
              <input type="hidden" name="redirect" value="{{ redirect_url }}">
            </form>
            {% endif %}
            {% if t.status != "in_progress" %}
            <form id="{{ section.sort_ctx.prefix }}set-in-progress-{{ t.short_id }}" method="post" action="/projects/{{ project_name }}/tasks/{{ t.full_id }}" hidden>
              <input type="hidden" name="status" value="in_progress">
              <input type="hidden" name="redirect" value="{{ redirect_url }}">
            </form>
            {% endif %}
            {% if t.status != "closed" %}
            <form id="{{ section.sort_ctx.prefix }}set-closed-{{ t.short_id }}" method="post" action="/projects/{{ project_name }}/tasks/{{ t.full_id }}" hidden>
              <input type="hidden" name="status" value="closed">
              <input type="hidden" name="redirect" value="{{ redirect_url }}">
            </form>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if section.total_pages > 1 %}
  <nav aria-label="{{ section.label }} task list pagination" class="mt-4">
    <menu class="buttons">
      {% if section.page > 1 %}
      {% let prev = section.page - 1 %}
      <li><a href="{{ section.pagination_href(prev) }}" class="button outline small">← Previous</a></li>
      {% endif %}
      {% for p in section.pagination_pages %}
      <li>
        {% if *p == section.page %}
        <a href="{{ section.pagination_href(p) }}" class="button small" aria-current="page">{{ p }}</a>
        {% else %}
        <a href="{{ section.pagination_href(p) }}" class="button outline small">{{ p }}</a>
        {% endif %}
      </li>
      {% endfor %}
      {% if section.page < section.total_pages %}
      {% let next = section.page + 1 %}
      <li><a href="{{ section.pagination_href(next) }}" class="button outline small">Next →</a></li>
      {% endif %}
    </menu>
  </nav>
  {% endif %}
  {% endif %}
{% endmacro %}

{% macro task_form_dialog(dialog_id, heading, form_action, submit_label, mode, all_projects, active_project, prefix, title, description, task_type, priority, effort, parent, labels) %}
<dialog id="{{ dialog_id }}" closedby="any">
  <form method="post" action="{{ form_action }}" {% if mode == "create" %}id="form-new-task"{% endif %}>
    <header>
      <h3>{{ heading }}</h3>
    </header>
    <div class="vstack">
      {% if mode == "create" %}
      <div data-field>
        <label for="{{ prefix }}-project">Project</label>
        <select id="{{ prefix }}-project" aria-label="Project" required>
          <option value=""{% if active_project.is_none() %} selected{% endif %}>Select project…</option>
          {% for p in all_projects %}
          <option value="{{ p }}"{% if active_project.as_deref() == Some(p.as_str()) %} selected{% endif %}>{{ p }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
      <label data-field>
        Title
        <input type="text" id="{{ prefix }}-title" name="title" value="{{ title }}" required>
      </label>
      <label data-field>
        Description
        <textarea id="{{ prefix }}-desc" name="description" rows="{% if mode == "edit" %}6{% else %}3{% endif %}">{{ description }}</textarea>
      </label>
      <div class="hstack gap-2">
        <div data-field>
          <label for="{{ prefix }}-type">Type</label>
          <select id="{{ prefix }}-type" name="task_type">
            <option value="task"{% if task_type == "task" %} selected{% endif %}>Task</option>
            <option value="bug"{% if task_type == "bug" %} selected{% endif %}>Bug</option>
            <option value="feature"{% if task_type == "feature" %} selected{% endif %}>Feature</option>
          </select>
        </div>
        <div data-field>
          <label for="{{ prefix }}-priority">Priority</label>
          <select id="{{ prefix }}-priority" name="priority">
            <option value="high"{% if priority == "high" %} selected{% endif %}>High</option>
            <option value="medium"{% if priority == "medium" %} selected{% endif %}>Medium</option>
            <option value="low"{% if priority == "low" %} selected{% endif %}>Low</option>
          </select>
        </div>
        <div data-field>
          <label for="{{ prefix }}-effort">Effort</label>
          <select id="{{ prefix }}-effort" name="effort">
            <option value="low"{% if effort == "low" %} selected{% endif %}>Low</option>
            <option value="medium"{% if effort == "medium" %} selected{% endif %}>Medium</option>
            <option value="high"{% if effort == "high" %} selected{% endif %}>High</option>
          </select>
        </div>
      </div>
      {% if mode == "create" %}
      <label data-field>
        Labels <small class="text-light">(comma-separated)</small>
        <input type="text" id="{{ prefix }}-labels" name="labels" value="{{ labels }}" placeholder="frontend, urgent">
      </label>
      {% endif %}
      <label data-field>
        Parent task ID <small class="text-light">{% if mode == "edit" %}(leave empty to clear){% else %}(optional){% endif %}</small>
        <input type="text" id="{{ prefix }}-parent" name="parent" value="{{ parent }}" placeholder="td-XXXXXXX" aria-label="Parent task ID">
      </label>
      {% if mode == "edit" %}
      <input type="hidden" name="_parent_present" value="1">
      {% endif %}
    </div>
    <footer>
      <button type="button" commandfor="{{ dialog_id }}" command="close" class="outline">Cancel</button>
      <button type="submit">{{ submit_label }}</button>
    </footer>
  </form>
</dialog>
{% endmacro %}