{% extends "base.html" %}
{% block title %}Failed — Libris{% endblock %}
{% block content %}
<div class="max-w-4xl">
  <div class="flex items-center gap-4 mb-5">
    <h1 class="text-xl font-bold">Failed Queue</h1>
    {% if records %}
    <span class="bg-gray-100 text-gray-600 text-xs font-semibold px-2.5 py-0.5 rounded-full">{{ records|length }}</span>
    {% endif %}
  </div>

  {% if error %}
  <div class="alert alert-red">{{ error }}</div>
  {% endif %}

  {% if not records and not error %}
  <div class="bg-white rounded-lg border border-gray-200 p-12 text-center text-gray-400">
    <div class="text-3xl mb-2">✅</div>
    <div class="font-medium">No failed files</div>
    <div class="text-sm mt-1">Everything processed without errors.</div>
  </div>
  {% else %}

  <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
    <table class="queue w-full">
      <thead>
        <tr>
          <th class="w-8">#</th>
          <th>File</th>
          <th>Error</th>
          <th>Type</th>
          <th>Age</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for r in records %}
        <tr id="row-{{ r.id }}"
            class="{{ 'opacity-60' if not r._exists else '' }}"
            hx-swap="outerHTML swap:200ms">
          <td class="text-xs text-gray-400 text-center">{{ loop.index }}</td>
          <td class="max-w-xs">
            <div class="text-xs font-mono text-gray-700 truncate font-medium" title="{{ r.current_path }}">
              {{ r.current_path.split('/')[-1] }}
            </div>
            {% if not r._exists %}
            <div class="text-xs text-red-400 mt-0.5">file missing from disk</div>
            {% endif %}
          </td>
          <td class="max-w-sm">
            {% if r.error_msg %}
            <div class="text-xs font-mono text-red-600 truncate" title="{{ r.error_msg }}">{{ r.error_msg[:120] }}</div>
            {% else %}
            <span class="text-xs text-gray-400">—</span>
            {% endif %}
          </td>
          <td>
            {% if r.media_type == 'audiobook' %}
            <span class="tag tag-audio">audio</span>
            {% else %}
            <span class="tag tag-ebook">ebook</span>
            {% endif %}
          </td>
          <td class="text-xs text-gray-400 whitespace-nowrap">{{ r._age }}</td>
          <td>
            <div class="flex items-center gap-1">
              {% if r._exists %}
              <button type="button" class="btn btn-amber btn-sm"
                      hx-post="/api/failed/{{ r.id }}/recover"
                      hx-target="#row-{{ r.id }}"
                      hx-swap="outerHTML swap:200ms"
                      title="Move back to review/ for re-processing">
                Recover
              </button>
              {% else %}
              <button type="button" class="btn btn-ghost btn-sm" disabled
                      title="File missing — cannot recover"
                      style="opacity:0.4;cursor:not-allowed">
                Recover
              </button>
              {% endif %}
              <button type="button" class="btn btn-danger btn-sm"
                      hx-post="/api/failed/{{ r.id }}/remove"
                      hx-target="#row-{{ r.id }}"
                      hx-swap="outerHTML swap:200ms"
                      hx-confirm="Permanently delete '{{ r.current_path.split('/')[-1] }}'?">
                Remove
              </button>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200 text-xs text-gray-500">
    <span class="font-semibold">Tip:</span>
    Recover moves the file back to <code class="bg-gray-100 px-1 rounded">review/</code> so it can be
    rematched and re-imported. Remove deletes the file from disk permanently.
  </div>

  {% endif %}
</div>
{% endblock %}