{% extends "base.html" %}

{% block title %}td — {{ project_name }}{% 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="container">
  <div class="row">
    <article class="card col-4">
      <h2>Open</h2>
      <p><strong>{{ stats_open }}</strong></p>
    </article>
    <article class="card col-4">
      <h2>In progress</h2>
      <p><strong>{{ stats_in_progress }}</strong></p>
    </article>
    <article class="card col-4">
      <h2>Closed</h2>
      <p><strong>{{ stats_closed }}</strong></p>
    </article>
  </div>
</div>

{% if !next_up.is_empty() %}
<details open class="mt-4">
  <summary><h2>Next up</h2></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>
        </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>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</details>
{% endif %}

<details open class="mt-4">
  <summary><h2>Tasks</h2></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>
    <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 %}
  <div class="table">
    <table>
      <caption class="sr-only">Task list for project {{ project_name }}</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>
        </tr>
      </thead>
      <tbody>
        {% for t in page_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>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% 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 %}