{% 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 Storage Jobs</h1>
      <p class="text-sm text-slate-500">Cloud-to-local streaming queue for branch storage nodes.</p>
    </div>
    <div class="flex gap-2"><a href="/documents/download-requests" class="px-3 py-2 rounded-xl bg-slate-100 text-slate-700 text-sm font-semibold">Download Requests</a><a href="/documents/storage-nodes" class="px-3 py-2 rounded-xl bg-slate-100 text-slate-700 text-sm font-semibold">Storage Nodes</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 / completed / failed"></div>
    <button class="rounded-xl bg-slate-900 text-white px-4 py-2 font-semibold">Filter</button>
    <a href="/documents/storage-jobs" 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">Job</th><th class="p-3 text-left">Version</th><th class="p-3 text-left">Status</th><th class="p-3 text-left">Target Path</th><th class="p-3 text-left">Created</th></tr></thead>
      <tbody>
      {% for job in jobs %}
        <tr class="border-t">
          <td class="p-3 font-semibold">#{{ job.id }}</td>
          <td class="p-3">{{ job.version_id }}</td>
          <td class="p-3"><span class="px-2 py-1 rounded-full text-xs bg-slate-100 text-slate-700">{{ job.status }}</span></td>
          <td class="p-3 font-mono text-xs break-all">{{ job.target_relative_path }}</td>
          <td class="p-3">{{ job.created_at_utc }}</td>
        </tr>
      {% else %}
        <tr><td colspan="5" class="p-6 text-center text-slate-500">No storage jobs found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}