{% extends "base.html" %}

{% block title %}pxq dashboard · jobs{% endblock %}

{% block header_actions %}
  <a
    class="px-3 py-2 rounded-lg card text-sm hover:bg-white/10 transition"
    href="/?all={{ 'true' if not include_all else 'false' }}"
  >
    {% if include_all %}Hide finished{% else %}Show all{% endif %}
  </a>
  <a class="px-3 py-2 rounded-lg card text-sm hover:bg-white/10 transition" href="/">Home</a>
{% endblock %}

{% block content %}
  <section class="card rounded-2xl overflow-hidden">
    <div class="px-4 sm:px-6 py-4 border-b border-white/10 flex items-center justify-between">
      <div>
        <div class="text-sm font-medium">Jobs</div>
        <div class="text-xs muted">Auto-refreshes via HTMX polling.</div>
      </div>
      <button
        class="px-3 py-2 rounded-lg bg-white/10 hover:bg-white/15 transition text-sm"
        hx-get="/partials/jobs{% if include_all %}?all=true{% endif %}"
        hx-target="#job-list"
        hx-swap="innerHTML"
      >
        Refresh
      </button>
    </div>

    <div
      id="job-list"
      hx-get="/partials/jobs{% if include_all %}?all=true{% endif %}"
      hx-trigger="every 10s"
      hx-swap="innerHTML"
    >
      {% include "partials/job_list.html" %}
    </div>
  </section>
{% endblock %}