{% extends "base.html" %}

{% block title %}Epics — Tacks{% endblock %}

{% block content %}
<div id="content-area"
     hx-get="/epics"
     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">

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Status</th>
      <th>Progress</th>
    </tr>
  </thead>
  <tbody>
    {% if epics.is_empty() %}
    <tr>
      <td colspan="4" style="text-align:center;color:var(--pico-muted-color);padding:2rem 0">No epics yet</td>
    </tr>
    {% else %}
    {% for ep in epics %}
    <tr>
      <td><a href="/epics/{{ ep.task.id }}">{{ ep.task.id }}</a></td>
      <td>{{ ep.task.title }}</td>
      <td><span class="badge status-{{ ep.task.status }}">
        {%- if ep.task.status == crate::models::Status::Open -%}○ Open
        {%- else if ep.task.status == crate::models::Status::InProgress -%}◐ In Progress
        {%- else if ep.task.status == crate::models::Status::Done -%}✓ Done
        {%- else -%}⊘ Blocked{%- endif -%}
      </span></td>
      <td><span class="progress-done">{{ ep.children_done }}</span>/<span class="progress-wip">{{ ep.children_in_progress }}</span>/<span class="progress-open">{{ ep.children_open }}</span> <span class="progress-total">({{ ep.children_total }})</span></td>
    </tr>
    {% endfor %}
    {% endif %}
  </tbody>
</table>
</div>
{% endblock %}