{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-slate-900">Document Download Requests</h1>
      <p class="text-sm text-slate-500">Secure local-to-cloud retrieval queue for files stored on branch storage nodes.</p>
    </div>
    <div class="flex gap-2">
      <a href="/documents/storage-jobs" class="px-3 py-2 rounded-xl bg-slate-100 text-slate-700 text-sm font-semibold">Storage Jobs</a>
      <a href="/documents" class="px-3 py-2 rounded-xl bg-slate-900 text-white text-sm font-semibold">Documents</a>
    </div>
  </div>

  <form method="get" class="rounded-2xl border bg-white p-4 flex gap-3 items-end">
    <div><label class="text-sm font-medium">Status</label><input name="status" value="{{ status }}" class="mt-1 rounded-xl border p-2" placeholder="pending / ready / failed"></div>
    <button class="rounded-xl bg-slate-900 text-white px-4 py-2 font-semibold">Filter</button>
    <a href="/documents/download-requests" class="rounded-xl bg-slate-100 text-slate-700 px-4 py-2 font-semibold">Clear</a>
  </form>

  <div class="rounded-2xl border bg-white overflow-hidden">
    <table class="w-full text-sm">
      <thead class="bg-slate-50 text-slate-600"><tr><th class="p-3 text-left">Request</th><th class="p-3 text-left">Document</th><th class="p-3 text-left">Version</th><th class="p-3 text-left">Status</th><th class="p-3 text-left">Local Path</th><th class="p-3 text-left">Created</th><th class="p-3 text-right">Action</th></tr></thead>
      <tbody>
      {% for item in requests %}
        <tr class="border-t">
          <td class="p-3 font-semibold">#{{ item.id }}</td>
          <td class="p-3">{{ item.document.title if item.document else item.document_id }}</td>
          <td class="p-3">{{ item.version.version_no if item.version else item.version_id }}</td>
          <td class="p-3"><span class="px-2 py-1 rounded-full text-xs bg-slate-100 text-slate-700">{{ item.request_status.replace('_',' ').title() }}</span>{% if item.last_error %}<div class="mt-1 text-xs text-red-600">{{ item.last_error }}</div>{% endif %}</td>
          <td class="p-3 font-mono text-xs break-all">{{ item.local_relative_path or '-' }}</td>
          <td class="p-3">{{ item.created_at_utc }}</td>
          <td class="p-3 text-right">{% if item.request_status == 'ready' %}<a href="/documents/download-requests/{{ item.id }}/download" class="font-semibold text-brand-700 hover:underline">Download</a>{% else %}<span class="text-xs text-slate-400">Not ready</span>{% endif %}</td>
        </tr>
      {% else %}
        <tr><td colspan="7" class="p-6 text-center text-slate-500">No download requests found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}