{% extends "base.html" %}
{% import "macros.html" as macros %}

{% block title %}{{ project_name }} — td{% endblock %}

{% block content %}
<nav aria-label="Breadcrumb">
  <ol class="unstyled hstack">
    <li><a href="/" class="unstyled">Projects</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/projects/{{ project_name }}" class="unstyled" aria-current="page"><strong>{{ project_name }}</strong></a></li>
  </ol>
</nav>

<h1>{{ project_name }}</h1>

<div class="row">
    <article class="card col-4">
      <p class="text-light">Open</p>
      <p><strong>{{ stats_open }}</strong></p>
    </article>
    <article class="card col-4">
      <p class="text-light">In progress</p>
      <p><strong>{{ stats_in_progress }}</strong></p>
    </article>
    <article class="card col-4">
      <p class="text-light">Closed</p>
      <p><strong>{{ stats_closed }}</strong></p>
    </article>
</div>

{% if !next_up.is_empty() %}
<details open class="mt-4">
  <summary>Next up</summary>
  <div class="table">
    <table>
      <caption class="sr-only">Top scored tasks recommended to work on next</caption>
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">ID</th>
          <th scope="col">Score</th>
          <th scope="col">Title</th>
          <th scope="col">Change status</th>
        </tr>
      </thead>
      <tbody>
        {% for (i, s) in next_up.iter().enumerate() %}
        <tr>
          <td>{{ i + 1 }}</td>
          <td><a href="/projects/{{ project_name }}/tasks/{{ s.id }}"><code>{{ s.short_id }}</code></a></td>
          <td>{{ s.score }}</td>
          <td>{{ s.title }}</td>
          <td>
            <ot-dropdown>
              <button popovertarget="next-status-{{ s.short_id }}" class="outline small" aria-label="Change status of {{ s.short_id }}, currently {{ s.status_display }}">
                {{ s.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="next-status-{{ s.short_id }}">
                <button role="menuitemradio" aria-checked="{{ s.status == "open" }}" {% if s.status == "open" %}disabled{% else %}form="next-set-open-{{ s.short_id }}"{% endif %}>Open</button>
                <button role="menuitemradio" aria-checked="{{ s.status == "in_progress" }}" {% if s.status == "in_progress" %}disabled{% else %}form="next-set-in-progress-{{ s.short_id }}"{% endif %}>In progress</button>
                <button role="menuitemradio" aria-checked="{{ s.status == "closed" }}" {% if s.status == "closed" %}disabled{% else %}form="next-set-closed-{{ s.short_id }}"{% endif %}>Closed</button>
              </menu>
            </ot-dropdown>
            {% if s.status != "open" %}
            <form id="next-set-open-{{ s.short_id }}" method="post" action="/projects/{{ project_name }}/tasks/{{ s.id }}" hidden>
              <input type="hidden" name="status" value="open">
              <input type="hidden" name="redirect" value="/projects/{{ project_name }}">
            </form>
            {% endif %}
            {% if s.status != "in_progress" %}
            <form id="next-set-in-progress-{{ s.short_id }}" method="post" action="/projects/{{ project_name }}/tasks/{{ s.id }}" hidden>
              <input type="hidden" name="status" value="in_progress">
              <input type="hidden" name="redirect" value="/projects/{{ project_name }}">
            </form>
            {% endif %}
            {% if s.status != "closed" %}
            <form id="next-set-closed-{{ s.short_id }}" method="post" action="/projects/{{ project_name }}/tasks/{{ s.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>
</details>
{% endif %}

<details{% if next_up.is_empty() || filter_priority.is_some() || filter_effort.is_some() || filter_label.is_some() || !filter_search.is_empty() || filter_status.as_deref() != Some("open") || sort_ctx.field != "priority" || sort_ctx.order != "asc" %} open{% endif %} class="mt-4">
  <summary>Tasks</summary>

  <form method="get" action="/projects/{{ project_name }}" class="hstack gap-2 mt-2 mb-4">
    <div data-field>
      <label for="filter-status">Status</label>
      <select id="filter-status" name="status" aria-label="Filter by status">
        <option value="">All</option>
        <option value="open"{% if filter_status.as_deref() == Some("open") %} selected{% endif %}>Open</option>
        <option value="in_progress"{% if filter_status.as_deref() == Some("in_progress") %} selected{% endif %}>In progress</option>
        <option value="closed"{% if filter_status.as_deref() == Some("closed") %} selected{% endif %}>Closed</option>
      </select>
    </div>
    <div data-field>
      <label for="filter-priority">Priority</label>
      <select id="filter-priority" name="priority" aria-label="Filter by priority">
        <option value="">All</option>
        <option value="high"{% if filter_priority.as_deref() == Some("high") %} selected{% endif %}>High</option>
        <option value="medium"{% if filter_priority.as_deref() == Some("medium") %} selected{% endif %}>Medium</option>
        <option value="low"{% if filter_priority.as_deref() == Some("low") %} selected{% endif %}>Low</option>
      </select>
    </div>
    <div data-field>
      <label for="filter-effort">Effort</label>
      <select id="filter-effort" name="effort" aria-label="Filter by effort">
        <option value="">All</option>
        <option value="low"{% if filter_effort.as_deref() == Some("low") %} selected{% endif %}>Low</option>
        <option value="medium"{% if filter_effort.as_deref() == Some("medium") %} selected{% endif %}>Medium</option>
        <option value="high"{% if filter_effort.as_deref() == Some("high") %} selected{% endif %}>High</option>
      </select>
    </div>
    <div data-field>
      <label for="filter-label">Label</label>
      <select id="filter-label" name="label" aria-label="Filter by label">
        <option value="">All</option>
        {% for l in all_labels %}
        <option value="{{ l }}"{% if filter_label.as_deref() == Some(l.as_str()) %} selected{% endif %}>{{ l }}</option>
        {% endfor %}
      </select>
    </div>
    <div data-field>
      <label for="filter-search">Search</label>
      <input type="text" id="filter-search" name="q" value="{{ filter_search }}" placeholder="Search titles…" aria-label="Search tasks by title">
    </div>
    <input type="hidden" name="sort" value="{{ sort_ctx.field }}">
    <input type="hidden" name="order" value="{{ sort_ctx.order }}">
    <button type="submit" class="outline">Filter</button>
  </form>

  {% if page_tasks.is_empty() %}
  <p class="text-light">No tasks match the current filters.</p>
  {% else %}
  {% call macros::sortable_task_table(project_name, page_tasks, "Task list for project", sort_ctx) %}{% endcall %}

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