{% extends "base.html" %}

{% block title %}td — {{ task.title }}{% 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">{{ project_name }}</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/projects/{{ project_name }}/tasks/{{ task.full_id }}" class="unstyled" aria-current="page"><strong>{{ task.short_id }}</strong></a></li>
  </ol>
</nav>

<article class="card mt-4">
  <header>
    <h1>{{ task.title }}</h1>
    <span class="badge{% if task.status == "closed" %} success{% elif task.status == "in_progress" %} secondary{% endif %}">{{ task.status }}</span>
  </header>

  {% if !task.description.is_empty() %}
  <p>{{ task.description }}</p>
  {% endif %}

  <div class="table mt-4">
    <table>
      <caption class="sr-only">Task metadata</caption>
      <tbody>
        <tr>
          <th scope="row">ID</th>
          <td><code>{{ task.short_id }}</code></td>
        </tr>
        <tr>
          <th scope="row">Type</th>
          <td>{{ task.task_type }}</td>
        </tr>
        <tr>
          <th scope="row">Priority</th>
          <td>{{ task.priority }}</td>
        </tr>
        <tr>
          <th scope="row">Effort</th>
          <td>{{ task.effort }}</td>
        </tr>
        <tr>
          <th scope="row">Created</th>
          <td><time>{{ task.created_at }}</time></td>
        </tr>
        <tr>
          <th scope="row">Updated</th>
          <td><time>{{ task.updated_at }}</time></td>
        </tr>
      </tbody>
    </table>
  </div>

  {% if !task.labels.is_empty() %}
  <section class="mt-4" aria-label="Labels">
    <h2>Labels</h2>
    <div class="hstack gap-2">
      {% for l in task.labels %}
      <span class="badge">{{ l }}</span>
      {% endfor %}
    </div>
  </section>
  {% endif %}

  {% if !blockers_open.is_empty() || !blockers_resolved.is_empty() %}
  <section class="mt-4" aria-label="Blockers">
    <h2>Blockers</h2>
    <ul>
      {% for b in blockers_open %}
      <li><a href="/projects/{{ project_name }}/tasks/{{ b.full_id }}"><code>{{ b.short_id }}</code></a> <span class="badge warning">open</span></li>
      {% endfor %}
      {% for b in blockers_resolved %}
      <li><a href="/projects/{{ project_name }}/tasks/{{ b.full_id }}"><code>{{ b.short_id }}</code></a> <span class="badge success">resolved</span></li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}

  {% if !subtasks.is_empty() %}
  <section class="mt-4" aria-label="Subtasks">
    <h2>Subtasks</h2>
    <div class="table">
      <table>
        <caption class="sr-only">Subtasks of {{ task.title }}</caption>
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Status</th>
            <th scope="col">Title</th>
          </tr>
        </thead>
        <tbody>
          {% for s in subtasks %}
          <tr>
            <td><a href="/projects/{{ project_name }}/tasks/{{ s.full_id }}"><code>{{ s.short_id }}</code></a></td>
            <td><span class="badge{% if s.status == "closed" %} success{% elif s.status == "in_progress" %} secondary{% endif %}">{{ s.status }}</span></td>
            <td>{{ s.title }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  {% endif %}

  {% if !task.logs.is_empty() %}
  <section class="mt-4" aria-label="Work log">
    <h2>Work log</h2>
    {% for log in task.logs %}
    <details>
      <summary><time>{{ log.timestamp }}</time></summary>
      <p>{{ log.message }}</p>
    </details>
    {% endfor %}
  </section>
  {% endif %}
</article>
{% endblock %}