{% macro task_table(project_name, tasks, caption) %}
<div class="table">
  <table>
    <caption class="sr-only">{{ caption }}</caption>
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Status</th>
        <th scope="col">Priority</th>
        <th scope="col">Effort</th>
        <th scope="col">Title</th>
        <th scope="col">Created</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tasks %}
      <tr>
        <td><a href="/projects/{{ project_name }}/tasks/{{ t.full_id }}"><code>{{ t.short_id }}</code></a></td>
        <td><span class="badge{% if t.status == "closed" %} success{% elif t.status == "in_progress" %} secondary{% endif %}">{{ t.status }}</span></td>
        <td>{{ t.priority }}</td>
        <td>{{ t.effort }}</td>
        <td>{{ t.title }}</td>
        <td><time datetime="{{ t.created_at }}">{{ t.created_at_display }}</time></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}

{% macro sortable_task_table(project_name, tasks, caption, sort_ctx) %}
<div class="table">
  <table>
    <caption class="sr-only">{{ caption }}</caption>
    <thead>
      <tr>
        <th scope="col"><a href="{{ sort_ctx.column_href("id") }}">ID{{ sort_ctx.arrow("id") }}</a></th>
        <th scope="col"><a href="{{ sort_ctx.column_href("status") }}">Status{{ sort_ctx.arrow("status") }}</a></th>
        <th scope="col"><a href="{{ sort_ctx.column_href("priority") }}">Priority{{ sort_ctx.arrow("priority") }}</a></th>
        <th scope="col"><a href="{{ sort_ctx.column_href("effort") }}">Effort{{ sort_ctx.arrow("effort") }}</a></th>
        <th scope="col"><a href="{{ sort_ctx.column_href("title") }}">Title{{ sort_ctx.arrow("title") }}</a></th>
        <th scope="col"><a href="{{ sort_ctx.column_href("created") }}">Created{{ sort_ctx.arrow("created") }}</a></th>
        <th scope="col">Change status</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tasks %}
      <tr>
        <td><a href="/projects/{{ project_name }}/tasks/{{ t.full_id }}"><code>{{ t.short_id }}</code></a></td>
        <td><span class="badge{% if t.status == "closed" %} success{% elif t.status == "in_progress" %} secondary{% endif %}">{{ t.status }}</span></td>
        <td>{{ t.priority }}</td>
        <td>{{ t.effort }}</td>
        <td>{{ t.title }}</td>
        <td><time datetime="{{ t.created_at }}">{{ t.created_at_display }}</time></td>
        <td>
          <ot-dropdown>
            <button popovertarget="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="status-{{ t.short_id }}">
              <button role="menuitemradio" aria-checked="{{ t.status == "open" }}" {% if t.status == "open" %}disabled{% else %}form="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="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="set-closed-{{ t.short_id }}"{% endif %}>Closed</button>
            </menu>
          </ot-dropdown>
          {% if t.status != "open" %}
          <form id="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="/projects/{{ project_name }}">
          </form>
          {% endif %}
          {% if t.status != "in_progress" %}
          <form id="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="/projects/{{ project_name }}">
          </form>
          {% endif %}
          {% if t.status != "closed" %}
          <form id="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="/projects/{{ project_name }}">
          </form>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endmacro %}