{#
  Pagination Macro
  ================
  A reusable pagination component for tables and lists.

  Usage:
    {% from 'shared/macros/pagination.html' import pagination %}
    {{ pagination() }}

  Required Alpine.js data properties:
    - pagination.page: Current page number
    - pagination.total: Total number of items
    - startIndex: First item index on current page
    - endIndex: Last item index on current page
    - totalPages: Total number of pages
    - pageNumbers: Array of page numbers with '...' for ellipsis

  Required Alpine.js methods:
    - previousPage(): Go to previous page
    - nextPage(): Go to next page
    - goToPage(pageNum): Go to specific page
#}

{% macro pagination(show_condition="true") %}
<div x-show="{{ show_condition }}" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
    {# Results Info #}
    <span class="flex items-center col-span-3">
        Showing <span class="mx-1 font-bold" x-text="startIndex"></span>-<span class="mx-1 font-bold" x-text="endIndex"></span> of <span class="mx-1 font-bold" x-text="pagination.total"></span>
    </span>
    <span class="col-span-2"></span>

    {# Pagination Controls #}
    <span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
        <nav aria-label="Table navigation">
            <ul class="inline-flex items-center">
                {# Previous Button #}
                <li>
                    <button
                        @click="previousPage()"
                        :disabled="pagination.page === 1"
                        class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple"
                        :class="pagination.page === 1 ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                        aria-label="Previous"
                    >
                        <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
                            <path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
                        </svg>
                    </button>
                </li>

                {# Page Numbers #}
                <template x-for="pageNum in pageNumbers" :key="pageNum">
                    <li>
                        <button
                            x-show="pageNum !== '...'"
                            @click="goToPage(pageNum)"
                            class="px-3 py-1 rounded-md focus:outline-none focus:shadow-outline-purple"
                            :class="pagination.page === pageNum ? 'text-white bg-purple-600 border border-purple-600' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                            x-text="pageNum"
                        ></button>
                        <span x-show="pageNum === '...'" class="px-3 py-1">...</span>
                    </li>
                </template>

                {# Next Button #}
                <li>
                    <button
                        @click="nextPage()"
                        :disabled="pagination.page === totalPages"
                        class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple"
                        :class="pagination.page === totalPages ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-100 dark:hover:bg-gray-700'"
                        aria-label="Next"
                    >
                        <svg class="w-4 h-4 fill-current" aria-hidden="true" viewBox="0 0 20 20">
                            <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" fill-rule="evenodd"></path>
                        </svg>
                    </button>
                </li>
            </ul>
        </nav>
    </span>
</div>
{% endmacro %}


{#
  Simple Pagination Macro (Prev/Next only)
  ========================================
  A simpler pagination with just previous/next buttons.

  Usage:
    {% from 'shared/macros/pagination.html' import pagination_simple %}
    {{ pagination_simple() }}
#}

{% macro pagination_simple(show_condition="true") %}
<div x-show="{{ show_condition }}" class="flex items-center justify-between px-4 py-3 bg-white border-t border-gray-200 dark:border-gray-700 dark:bg-gray-800">
    <div class="flex items-center">
        <span class="text-sm text-gray-700 dark:text-gray-400">
            Showing <span class="font-semibold" x-text="startIndex"></span>-<span class="font-semibold" x-text="endIndex"></span>
            of <span class="font-semibold" x-text="pagination.total"></span> results
        </span>
    </div>
    <div class="flex items-center space-x-2">
        <button
            @click="previousPage()"
            :disabled="pagination.page === 1"
            class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
        >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
        </button>
        <span class="text-sm text-gray-700 dark:text-gray-400">
            Page <span x-text="pagination.page"></span> of <span x-text="totalPages"></span>
        </span>
        <button
            @click="nextPage()"
            :disabled="pagination.page === totalPages"
            class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
        >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
        </button>
    </div>
</div>
{% endmacro %}
