{% extends "base.html" %}

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

{% block content %}
<div id="content-area">
<div id="content-inner"
     hx-get="/epics/{{ task.id }}{{ poll_query }}"
     hx-trigger="every 2s [document.visibilityState === 'visible']"
     hx-select="#content-inner"
     hx-swap="outerHTML show:none"
     aria-live="polite"
     aria-atomic="false">

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/epics">Epics</a></li>
    <li><span class="breadcrumb-current">{{ task.title }}</span></li>
    <li>
      {% if view == "list" %}
      <span class="breadcrumb-current">List</span>
      {% else %}
      <span class="breadcrumb-current">Board</span>
      {% endif %}
    </li>
  </ol>
</nav>

<h1>{{ 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">
    <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"><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>
  <span class="meta-sep">·</span>
  <span class="meta-item"><span class="meta-label">Progress</span> <span class="progress-done">{{ children_done }}</span>/<span class="progress-wip">{{ children_in_progress }}</span>/<span class="progress-open">{{ children_open }}</span> <span class="progress-total">({{ children_total }})</span></span>
  {% if let Some(assignee) = task.assignee.as_deref() %}
  <span class="meta-sep">·</span>
  <span class="meta-item"><span class="meta-label">Assignee</span> {{ assignee }}</span>
  {% endif %}
  {% if !task.tags.is_empty() %}
  <span class="meta-sep">·</span>
  <span class="meta-item">
    {% for tag in &task.tags %}<span class="tag-pill">{{ tag }}</span>{% endfor %}
  </span>
  {% endif %}
</div>

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

<hr class="view-toggle-divider">

<div class="view-toggle-row">
  <div class="view-toggle-group">
    {% if view == "list" %}
    <span class="view-toggle-btn view-toggle-active">List</span>
    <a href="/epics/{{ task.id }}?view=board" class="view-toggle-btn">Board</a>
    {% else %}
    <a href="/epics/{{ task.id }}?view=list" class="view-toggle-btn">List</a>
    <span class="view-toggle-btn view-toggle-active">Board</span>
    {% endif %}
  </div>
  {% if view == "board" %}
  <div class="filter-multiselect filter-singleselect" id="epic-done-since-multiselect">
    <div class="filter-multiselect-trigger" tabindex="0" aria-haspopup="listbox" aria-expanded="false" aria-label="Filter done tasks by time range">
      <span class="filter-multiselect-pills"></span>
      <span class="filter-multiselect-placeholder">{% if done_since == "3d" %}3 days{% elif done_since == "7d" %}7 days{% elif done_since == "30d" %}30 days{% elif done_since == "all" %}All time{% else %}All time{% endif %}</span>
    </div>
    <ul class="filter-multiselect-dropdown" role="listbox" aria-multiselectable="false" hidden>
      <li role="option" data-value="3d" data-label="3 days"><span>3 days</span></li>
      <li role="option" data-value="7d" data-label="7 days"><span>7 days</span></li>
      <li role="option" data-value="30d" data-label="30 days"><span>30 days</span></li>
      <li role="option" data-value="all" data-label="All time"><span>All time</span></li>
    </ul>
    <input type="hidden" name="done_since" id="epic-done-since-select" value="{{ done_since }}"
           hx-get="/epics/{{ task.id }}"
           hx-target="#content-inner"
           hx-select="#content-inner"
           hx-swap="outerHTML show:none"
           hx-include="[name='done_since']"
           hx-vals='{"view": "board"}'
           hx-trigger="change"
           hx-push-url="true">
  </div>
  {% endif %}
</div>

{% if view == "list" %}

{% if children.is_empty() %}
<p>No subtasks yet.</p>
{% else %}
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Status</th>
      <th>Priority</th>
    </tr>
  </thead>
  <tbody>
    {% for child in &children %}
    <tr>
      <td><a href="/tasks/{{ child.id }}" hx-select="unset">{{ child.id }}</a></td>
      <td>{{ child.title }}</td>
      <td>
        <span class="badge status-{{ child.status }}">
          {%- if child.status == crate::models::Status::Open -%}○ Open
          {%- else if child.status == crate::models::Status::InProgress -%}◐ In Progress
          {%- else if child.status == crate::models::Status::Done -%}✓ Done
          {%- else -%}⊘ Blocked{%- endif -%}
        </span>
      </td>
      <td><span class="badge priority-{{ child.priority }}">
        {%- if child.priority == 1 -%}▲ P1{%- else if child.priority == 2 -%}▬ P2{%- else if child.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
      </span></td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% else %}

{% if children.is_empty() %}
<p>No subtasks yet.</p>
{% else %}
<div class="grid">
  <div class="board-column" data-status="open">
    <h3>Open <span class="column-count">({{ board_open_count }})</span></h3>
    {% for child in &children %}
    {%- if child.status == crate::models::Status::Open -%}
    <article class="board-card" draggable="true" data-task-id="{{ child.id }}">
      <div class="board-card-header">
        <a href="/tasks/{{ child.id }}"
           hx-get="/tasks/{{ child.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ child.title }}</a>
        <span class="badge priority-{{ child.priority }}">
          {%- if child.priority == 1 -%}▲ P1{%- else if child.priority == 2 -%}▬ P2{%- else if child.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
    </article>
    {%- endif -%}
    {% endfor %}
  </div>
  <div class="board-column" data-status="in_progress">
    <h3>In Progress <span class="column-count">({{ board_in_progress_count }})</span></h3>
    {% for child in &children %}
    {%- if child.status == crate::models::Status::InProgress -%}
    <article class="board-card" draggable="true" data-task-id="{{ child.id }}">
      <div class="board-card-header">
        <a href="/tasks/{{ child.id }}"
           hx-get="/tasks/{{ child.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ child.title }}</a>
        <span class="badge priority-{{ child.priority }}">
          {%- if child.priority == 1 -%}▲ P1{%- else if child.priority == 2 -%}▬ P2{%- else if child.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
    </article>
    {%- endif -%}
    {% endfor %}
  </div>
  <div class="board-column" data-status="blocked">
    <h3>Blocked <span class="column-count">({{ board_blocked_count }})</span></h3>
    {% for child in &children %}
    {%- if child.status == crate::models::Status::Blocked -%}
    <article class="board-card" draggable="true" data-task-id="{{ child.id }}">
      <div class="board-card-header">
        <a href="/tasks/{{ child.id }}"
           hx-get="/tasks/{{ child.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ child.title }}</a>
        <span class="badge priority-{{ child.priority }}">
          {%- if child.priority == 1 -%}▲ P1{%- else if child.priority == 2 -%}▬ P2{%- else if child.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
    </article>
    {%- endif -%}
    {% endfor %}
  </div>
  <div class="board-column" data-status="done">
    <h3>
      <button class="column-collapse-toggle" data-column="done" data-storage-key="epic-board-done-collapsed-{{ task.id }}" aria-label="Toggle done column">&#9660;</button>
      Done <span class="column-count">({{ board_done_count }})</span>
    </h3>
    <div class="column-cards">
    {% for child in &children %}
    {%- if child.status == crate::models::Status::Done -%}
    <article class="board-card" draggable="true" data-task-id="{{ child.id }}">
      <div class="board-card-header">
        <a href="/tasks/{{ child.id }}"
           hx-get="/tasks/{{ child.id }}"
           hx-target="#task-modal"
           hx-select="unset"
           hx-swap="innerHTML">{{ child.title }}</a>
        <span class="badge priority-{{ child.priority }}">
          {%- if child.priority == 1 -%}▲ P1{%- else if child.priority == 2 -%}▬ P2{%- else if child.priority == 3 -%}▽ P3{%- else -%}· P4{%- endif -%}
        </span>
      </div>
    </article>
    {%- endif -%}
    {% endfor %}
    </div>
  </div>
</div>
{% endif %}

{% endif %}

</div>

<section class="dep-tree-section">
  <details>
    <summary>Task Dependencies</summary>
    <div hx-get="/epics/{{ task.id }}/dep-tree"
         hx-trigger="revealed"
         hx-swap="innerHTML">
      <p class="dep-tree-empty">Loading…</p>
    </div>
  </details>
</section>

</div>
{% endblock %}