{% extends "body_base.html" %}
{% block main %}
<div class="container mx-auto p-4">
  <h1 class="text-2xl font-bold mb-4">Active Tasks</h1>
  {% if not jobs %}
  <div class="alert alert-info">
    <span>No active tasks</span>
  </div>
  {% else %}
  <div class="grid gap-4">
    {% for job in jobs %}
    {% if job.status == "Created" or job.status is mapping and job.status.InProgress %}
    <div class="card bg-base-200 shadow-xl" id="job-card-{{ job.id }}">
      <div class="card-body">
        <div class="card-title">
          {% if job.content.Url %}
          <h2>URL Task</h2>
          <p class="text-sm text-gray-500 break-all">{{ job.content.Url.url }}</p>
          {% elif job.content.File %}
          <h2>File Task</h2>
          <p class="text-sm text-gray-500">{{ job.content.File.file_info.path }}</p>
          {% elif job.content.Text %}
          <h2>Text Task</h2>
          <p class="text-sm text-gray-500">{{ job.content.Text.text }}</p>
          {% endif %}
        </div>
        <div class="space-y-2">
          <p><span class="font-medium">Status:</span>
            {% if job.status == "Created" %}
            Created
            {% elif job.status.InProgress %}
            In Progress
            {% endif %}
          </p>
          {% if job.status.InProgress %}
          <p><span class="font-medium">Attempts:</span> {{ job.status.InProgress.attempts }}</p>
          <p><span class="font-medium">Last Attempt:</span>
            {{ job.status.InProgress.last_attempt }}</p>
          {% endif %}
          <p><span class="font-medium">Category:</span>
            {% if job.content.Url %}
            {{ job.content.Url.category }}
            {% elif job.content.File %}
            {{ job.content.File.category }}
            {% elif job.content.Text %}
            {{ job.content.Text.category }}
            {% endif %}
          </p>
        </div>
        <div class="card-actions justify-end mt-4">
          <form hx-delete="/queue/{{ job.id }}" hx-target="#job-card-{{ job.id }}" hx-swap="outerHTML">
            <button class="btn btn-error">Cancel Task</button>
          </form>
        </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endblock %}