{% extends "base.html" %}

{% block title %}{{ task.id }} — Tacks{% endblock %}

{% block content %}
<h1 data-editable data-field="title" data-task-id="{{ task.id }}">{{ task.title }}</h1>

<div class="task-meta-row">
  <span class="meta-item"><span class="meta-label">ID</span> {{ task.id }}</span>
  <span class="meta-sep">·</span>
  <span class="meta-item" data-editable data-field="status" data-task-id="{{ task.id }}">
    <span class="badge status-{{ task.status }}">
      {%- if task.status == crate::models::Status::Open -%}○ Open
      {%- else if task.status == crate::models::Status::InProgress -%}◐ In Progress
      {%- else if task.status == crate::models::Status::Done -%}✓ Done
      {%- else -%}⊘ Blocked{%- endif -%}
    </span>
  </span>
  <span class="meta-sep">·</span>
  <span class="meta-item" data-editable data-field="priority" data-task-id="{{ task.id }}"><span class="badge priority-{{ task.priority }}">
    {%- if task.priority == 1 -%}▲ P1{%- else if task.priority == 2 -%}▬ P2{%- else if task.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
  </span></span>
  {% if let Some(p) = parent.as_ref() %}
  <span class="meta-sep">·</span>
  <span class="meta-item"><span class="meta-label">Epic</span> <a href="/epics/{{ p.id }}" class="epic-badge">{{ p.id }}: {{ p.title }}</a></span>
  {% endif %}
  <span class="meta-sep">·</span>
  <span class="meta-item" data-editable data-field="tags" data-task-id="{{ task.id }}">
    {% for tag in &task.tags %}<span class="tag-pill">{{ tag }}</span>{% endfor %}
    {% if task.tags.is_empty() %}<span class="meta-label">Tags</span> —{% endif %}
  </span>
  <span class="meta-sep">·</span>
  <span class="meta-item"><span class="meta-label">Created</span> {{ task.created_at.format("%b %d, %Y %H:%M") }}</span>
  <span class="meta-sep">·</span>
  <span class="meta-item"><span class="meta-label">Updated</span> {{ task.updated_at.format("%b %d, %Y %H:%M") }}</span>
</div>

{% if let Some(html) = description_html.as_deref() %}
<div class="task-description markdown-body" data-editable data-field="description" data-task-id="{{ task.id }}">{{ html|safe }}</div>
{% else %}
<div class="task-description" data-editable data-field="description" data-task-id="{{ task.id }}">—</div>
{% endif %}

{% if !blockers.is_empty() || !dependents.is_empty() %}
<section class="dep-tree-section">
  <details>
    <summary>Dependencies</summary>
    <div class="dep-tree-subsection">
      <h3>Blocked by</h3>
      <div hx-get="/tasks/{{ task.id }}/dep-tree?dir=up"
           hx-trigger="revealed"
           hx-swap="innerHTML">
        <p class="dep-tree-empty">Loading…</p>
      </div>
    </div>
    <div class="dep-tree-subsection">
      <h3>Blocks</h3>
      <div hx-get="/tasks/{{ task.id }}/dep-tree?dir=down"
           hx-trigger="revealed"
           hx-swap="innerHTML">
        <p class="dep-tree-empty">Loading…</p>
      </div>
    </div>
  </details>
</section>
{% endif %}

{% if !comments.is_empty() %}
<section>
  <h2>Comments</h2>
  {% for (i, comment) in comments.iter().enumerate() %}
  <article>
    <small>{{ comment.created_at.format("%b %d, %Y %H:%M") }}</small>
    <div class="markdown-body">{{ comment_bodies_html[i]|safe }}</div>
  </article>
  {% endfor %}
</section>
{% endif %}

<p><a href="/tasks">Back to task list</a></p>
{% endblock %}