{% extends "framework_modern.html" %}
{% load static %}

{# List title for empty text - defaults to "items", should be overridden by child templates #}
{% block list_title %}items{% endblock %}

{% block content %}
  {% block action_modals %}
  {% endblock action_modals %}

  <div class="px-8 py-4">
    <!-- Header Section -->
    <div class="card bg-base-100">
      <div class="card-body px-0 py-4">
        <div class="flex items-center justify-between">
          <h2 class="card-title text-2xl">
            {% block page_title %}{{ page_title|default:"Items" }}{% endblock %}
          </h2>
          {% block action_button %}
            {# Can be overridden by including action buttons for entity type #}
          {% endblock %}
        </div>
        <div class="mt-2">
          {% block description %}
          {% endblock %}
        </div>
      </div>
    </div>

    {% if list_mode == "combined" %}
      {# ===== COMBINED MODE: Single list without tabs ===== #}
      <div
        class="mt-6 w-full"
        x-data="remotePaginatedList({
            endpoint: '{{ api_endpoint }}',
            instanceId: '{{ entity_type }}_combined',
            perPage: {{ per_page|default:50 }}
          })"
      >
        {% include "collections/_paginated_list_partial.html" with empty_text=list_title|default:"items" show_review_badge=True %}
      </div>
    {% else %}
      {# ===== TABBED MODE: Reviewed/Unreviewed tabs (default) ===== #}
      <div
        class="mt-6 w-full"
        x-data="{
          activeTab: 'reviewed',
          reviewedCount: null,
          unreviewedCount: null,
          get bothLoaded() { return this.reviewedCount !== null && this.unreviewedCount !== null },
          get isEmpty() { return this.bothLoaded && this.reviewedCount === 0 && this.unreviewedCount === 0 },
          updateTabSelection() {
            if (this.bothLoaded && this.reviewedCount === 0 && this.unreviewedCount > 0) {
              this.activeTab = 'unreviewed';
            }
          }
        }"
      >
        {# No items found message - only show after both tabs have loaded #}
        <div x-show="isEmpty" class="text-base-content/70 py-8 text-center">
          <p>No items found.</p>
        </div>

        {# Tabs Navigation #}
        <div role="tablist" class="tabs tabs-border" x-show="!isEmpty">
          <button
            role="tab"
            class="tab"
            :class="{ 'tab-active': activeTab === 'reviewed' }"
            @click="activeTab = 'reviewed'"
            x-show="reviewedCount === null || reviewedCount > 0"
          >
            Reviewed
            <span
              class="badge badge-xs badge-dash badge-info mb-2 ml-2"
              :class="{ 'animate-pulse': reviewedCount === null }"
              x-text="reviewedCount ?? '…'"
            ></span>
          </button>
          <button
            role="tab"
            class="tab"
            :class="{ 'tab-active': activeTab === 'unreviewed' }"
            @click="activeTab = 'unreviewed'"
            x-show="unreviewedCount === null || unreviewedCount > 0"
          >
            Unreviewed
            <span
              class="badge badge-xs badge-dash badge-info mb-2 ml-2"
              :class="{ 'animate-pulse': unreviewedCount === null }"
              x-text="unreviewedCount ?? '…'"
            ></span>
          </button>
        </div>

        {# Reviewed Tab Content #}
        <div
          class="mt-6"
          x-show="activeTab === 'reviewed' && !isEmpty"
          x-data="remotePaginatedList({
              endpoint: '{{ api_endpoint }}?review_status=true',
              instanceId: '{{ entity_type }}_reviewed',
              isReviewed: true,
              perPage: {{ per_page|default:50 }}
            })"
          @items-loaded="reviewedCount = totalItems; updateTabSelection()"
        >
          {% include "collections/_paginated_list_partial.html" with empty_text="reviewed "|add:list_title|default:"items" show_review_badge=True always_show_badge=True %}
        </div>

        {# Unreviewed Tab Content #}
        <div
          class="mt-6"
          x-show="activeTab === 'unreviewed' && !isEmpty"
          x-data="remotePaginatedList({
              endpoint: '{{ api_endpoint }}?review_status=false',
              instanceId: '{{ entity_type }}_unreviewed',
              isReviewed: false,
              perPage: {{ per_page|default:50 }}
            })"
          @items-loaded="unreviewedCount = totalItems; updateTabSelection()"
        >
          {% include "collections/_paginated_list_partial.html" with empty_text="unreviewed "|add:list_title|default:"items" %}
        </div>
      </div>
    {% endif %}
  </div>
{% endblock content %}