{# Partial for paginated list content - expects to be inside a remotePaginatedList Alpine.js context #}
{# Variables: empty_text (string), show_review_badge (bool), always_show_badge (bool) #}
{% load envipytags %}
{# Loading state #}
<div
  x-show="isLoading"
  class="mx-auto flex h-32 w-32 items-center justify-center"
>
  {% include "components/loading-spinner.html" %}
</div>

{# Error state #}
<div
  x-show="!isLoading && error"
  class="alert alert-error/50 text-sm"
  x-text="error"
></div>

{# Content #}
<template x-if="!isLoading && !error">
  <div>
    {# Empty state #}
    <div
      x-show="totalItems === 0"
      class="text-base-content/70 py-8 text-center"
    >
      <p>No {{ empty_text|default:"items" }} found.</p>
    </div>

    {# Items list #}
    <ul class="menu bg-base-100 rounded-box w-full" x-show="totalItems > 0">
      <table class="table-zebra table">
        <thead>
          <tr>
            <th>User</th>

            <th>ID</th>
            <th>Name</th>
            <th>Status</th>
            <th>Queued At</th>
            <th>Done At</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="obj in paginatedItems" :key="obj.url">
            <tr>
              <td>
                <a :href="obj.user.url"><span x-text="obj.user.name"></span></a>
              </td>

              <td>
                <a :href="obj.url"><span x-text="obj.id"></span></a>
              </td>
              <td><span x-text="obj.name"></span></td>
              <td><span x-text="obj.status"></span></td>
              <td><span x-text="obj.created"></span></td>
              <td><span x-text="obj.done"></span></td>
            </tr>
          </template>
        </tbody>
      </table>
    </ul>

    {# Pagination controls #}
    <div
      x-show="totalPages > 1"
      class="mt-4 flex items-center justify-between px-2"
    >
      <span class="text-base-content/70 text-sm">
        Showing <span x-text="showingStart"></span>-<span
          x-text="showingEnd"
        ></span>
        of <span x-text="totalItems"></span>
      </span>
      <div class="join">
        <button
          class="join-item btn btn-sm"
          :disabled="currentPage === 1"
          @click="prevPage()"
        >
          «
        </button>
        <template x-for="item in pageNumbers" :key="item.key">
          <button
            class="join-item btn btn-sm"
            :class="{ 'btn-active': item.page === currentPage }"
            :disabled="item.isEllipsis"
            @click="!item.isEllipsis && goToPage(item.page)"
            x-text="item.page"
          ></button>
        </template>
        <button
          class="join-item btn btn-sm"
          :disabled="currentPage === totalPages"
          @click="nextPage()"
        >
          »
        </button>
      </div>
    </div>
  </div>
</template>
