{# 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) #}

{# 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">
      <template x-for="obj in paginatedItems" :key="obj.url">
        <li>
          <a :href="obj.url" class="hover:bg-base-200">
            <span x-text="obj.name"></span>
            {% if show_review_badge %}
              <span
                class="tooltip tooltip-left ml-auto"
                data-tip="Reviewed"
                {% if not always_show_badge %}
                  x-show="obj.review_status === 'reviewed'"
                {% endif %}
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="lucide lucide-check-icon lucide-check"
                >
                  <path d="M20 6 9 17l-5-5" />
                </svg>
              </span>
            {% endif %}
          </a>
        </li>
      </template>
    </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>