{% extends 'base.html.twig' %}
{% block title %}Jobs asincronos{% endblock %}

{% block content_header %}
  <div class="mb-6">
    <h2 class="text-2xl font-bold text-secondary-900">Jobs asincronos</h2>
    <p class="text-sm text-secondary-500">Monitoreo operativo de procesos pesados fuera del request web.</p>
  </div>
{% endblock %}

{% block content %}
  <div class="table-card">
    <div class="overflow-x-auto" data-table-pager data-page-size="20" data-page-options="10,20,50,100,all">
      <table class="min-w-full divide-y divide-secondary-200">
        <thead class="bg-secondary-50">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">ID</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Tipo</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Estado</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Progreso</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Cliente/Sitio</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Creado</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">Resultado</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-secondary-500">
              <span class="sr-only">Acciones</span>
            </th>
          </tr>
        </thead>
        <tbody class="divide-y divide-secondary-200 bg-white">
          {% for job in jobs %}
            <tr>
              <td class="px-4 py-3 text-sm text-secondary-900">{{ job.id }}</td>
              <td class="px-4 py-3 text-sm text-secondary-700">{{ job.tipo }}</td>
              <td class="px-4 py-3 text-sm text-secondary-700">{{ job.estado }}</td>
              <td class="px-4 py-3 text-sm text-secondary-700">{{ job.progreso }}%</td>
              <td class="px-4 py-3 text-sm text-secondary-700">{{ job.cliente.nombre }} / {{ job.sitio ? job.sitio.nombre : 'Todos' }}</td>
              <td class="px-4 py-3 text-sm text-secondary-700">{{ job.createdAt|date('Y-m-d H:i') }}</td>
              <td class="px-4 py-3 text-sm text-secondary-700">
                {% if job.archivoResultado %}
                  <a class="text-primary-700 hover:underline" href="{{ asset(job.archivoResultado) }}">Descargar</a>
                {% elseif job.error %}
                  <span class="text-red-700">{{ job.error|slice(0, 120) }}</span>
                {% else %}
                  -
                {% endif %}
              </td>
              <td class="px-4 py-3 text-sm text-secondary-700">
                {% if job.estado in ['pendiente', 'procesando'] %}
                  <form method="post" action="{{ path('async_job_cancel', {id: job.id}) }}" onsubmit="return confirm('Cancelar el job #{{ job.id }}? Quedara marcado como error.');">
                    <input type="hidden" name="_token" value="{{ csrf_token('async_job_cancel_' ~ job.id) }}">
                    <button type="submit" class="btn btn-sm btn-outline-secondary text-red-700">Cancelar</button>
                  </form>
                {% endif %}
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="8" class="px-4 py-8 text-center text-sm text-secondary-500">No hay jobs registrados.</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}