{% extends "base.html" %}
{% block title %}Backlog — ABREKA{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb"><a href="/">Dashboard</a> / Backlog</div>
{% endblock %}

{% block content %}
<div class="flex items-center gap-2 mb-2">
  <h1>Backlog</h1>
  {% if status_filter %}
  <span class="badge" style="background: {{ status_filter | backlog_status_color }};">{{ status_filter }}</span>
  <a href="/backlog" class="text-sm">(clear filter)</a>
  {% endif %}
</div>

{% if items %}
<div class="card">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Priority</th>
        <th>Status</th>
        <th>Title</th>
        <th>Tags</th>
        <th>Source</th>
        <th>Created</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td><a href="/backlog/{{ item.id }}" class="text-mono" style="font-weight: 600;">{{ item.id }}</a></td>
        <td class="text-mono" style="text-align: right;">{{ item.priority }}</td>
        <td>
          <a href="/backlog?status={{ item.status }}" style="text-decoration: none;">
            <span class="badge" style="background: {{ item.status | backlog_status_color }};">{{ item.status }}</span>
          </a>
        </td>
        <td>{{ item.title[:60] }}{% if item.title|length > 60 %}...{% endif %}</td>
        <td class="text-sm">
          {% for t in item.get('tags', []) %}
          <span style="background: #e2e5ea; padding: 1px 6px; border-radius: 4px; font-size: 11px;">{{ t }}</span>
          {% endfor %}
        </td>
        <td class="text-mono text-sm">
          {% if item.source_exp %}
          <a href="/experiments/{{ item.source_exp }}">{{ item.source_exp }}</a>
          {% else %}
          <span class="text-muted">—</span>
          {% endif %}
        </td>
        <td class="text-muted text-sm">{{ item.created_at[:10] }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card">
  <p class="text-muted">No backlog items{% if status_filter %} with status "{{ status_filter }}"{% endif %}.</p>
</div>
{% endif %}
{% endblock %}