{% if tasks|length == 0 %}
<p class="empty">No tasks yet.</p>
{% else %}
{% for t in tasks %}
<article class="task task-{{ t.status }}">
  <div class="task-main">
    <div class="task-title">{{ t.title }}</div>
    <div class="task-status"><span class="dot"></span>
      {% if t.status == 'pending' %}Queued
      {% elif t.status == 'processing' %}Processing on Facebook
      {% elif t.status == 'completed' %}Done
      {% elif t.status == 'failed' %}Failed
      {% else %}{{ t.status }}{% endif %}
    </div>
  </div>
  <div class="task-meta">
    <span>Video ID: {{ t.video_id or "—" }}</span>
    <span>Privacy: {{ t.privacy }}</span>
  </div>
  {% if t.status == 'completed' %}
  <div class="cdn-box">
    <input type="text" readonly value="{{ t.cdn_url }}" onclick="this.select()">
    <button onclick="copyText('{{ t.id }}', this)" data-url="{{ t.cdn_url }}">Copy</button>
  </div>
  {% endif %}
  {% if t.status == 'failed' %}
  <div class="error-box">{{ t.error_message or "Unknown error" }}</div>
  {% endif %}
  <form method="post" action="/tasks/{{ t.id }}/delete" class="task-delete">
    <button type="submit" class="btn-ghost">Remove</button>
  </form>
</article>
{% endfor %}
{% endif %}