{% extends "base.html" %}

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

{% block content %}
<div id="content-area"
     hx-get="/epics/{{ task.id }}?view={{ view }}"
     hx-trigger="every 2s [document.visibilityState === 'visible']"
     hx-target="this"
     hx-select="#content-area"
     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(desc) = task.description.as_deref() %}
<p class="task-description">{{ desc }}</p>
{% 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>
</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>Done <span class="column-count">({{ board_done_count }})</span></h3>
    {% 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>
{% endif %}

{% endif %}

</div>
{% endblock %}