{% from "_nav_bar.html" import nav %}
{% extends "base.html" %}
{% block title %}Executions{% endblock %}
{% block content %}
  {{ nav() }}
  <main class="p-8">
    <h1 class="text-2xl font-bold my-4">executions</h1>

    <div
      id="executions-list"
      hx-get="/exe?offset={{ offset }}&limit={{ limit }}"
      hx-trigger="every 2s"
      hx-select="#executions-list > *"
      hx-swap="innerHTML"
    >
      {% if executions %}
        <ul class="list-none">
          {% for execution in executions %}
            <li class="my-2">
              <a href="/exe/{{ execution.id }}" data-testid="ExecutionLink" class="link"
                >{{ execution.name }}</a
              >
              <span class="text-base-content/60 text-sm">— {{ execution.created_at }}</span>
            </li>
          {% endfor %}
        </ul>

        {% if total_count %}
          <div class="divider"></div>
          <p data-testid="PaginationInfo" class="mb-2 text-base-content/60 text-sm">
            showing {{ offset + 1 }}-{{ offset + executions|length }} of {{ total_count }} (page
            {{ page }})
          </p>
          <div class="join">
            <button
              data-testid="PaginationPrev"
              {% if offset > 0 %}onclick="window.location.href='/exe?offset={{ offset - limit }}&limit={{ limit }}'"{% else %}disabled{% endif %}
              class="join-item btn btn-sm btn-outline"
            >
              ← prev
            </button>
            <button
              data-testid="PaginationNext"
              {% if has_next_page %}onclick="window.location.href='/exe?offset={{ offset + limit }}&limit={{ limit }}'"{% else %}disabled{% endif %}
              class="join-item btn btn-sm btn-outline"
            >
              next →
            </button>
          </div>
        {% endif %}
      {% else %}
        <p data-testid="ExecutionsListEmpty">no executions found.</p>
      {% endif %}
    </div>
  </main>
{% endblock %}