{{-- ページネーションコントロール（Alpine.js用） --}}

{{-- 前へ --}}
<template x-if="currentPage === 1">
    <span class="flex items-center justify-center w-6 h-6 text-gray-400 text-sm">
        <i class="fa-solid fa-caret-left fa-fw"></i>
    </span>
</template>
<template x-if="currentPage !== 1">
    <button type="button" @click="goToPage(currentPage - 1)"
        class="flex items-center justify-center w-6 h-6 text-gray-400 text-sm transition-colors duration-300 hover:bg-secondary-300 hover:text-white rounded-full">
        <i class="fa-solid fa-caret-left fa-fw"></i>
    </button>
</template>

{{-- ページ番号 --}}
<template x-for="page in getPageNumbers()" :key="page">
    <template x-if="page === '...'">
        <span class="hidden sm:flex items-center justify-center min-w-6 h-6 px-0.5 mr-1 text-secondary-700 text-sm">...</span>
    </template>
    <template x-if="page !== '...' && page === currentPage">
        <span class="hidden sm:flex items-center justify-center min-w-6 h-6 px-0.5 mr-1 rounded-full text-xs font-bold text-white bg-primary-700"
            x-text="page"></span>
    </template>
    <template x-if="page !== '...' && page !== currentPage">
        <button type="button" @click="goToPage(page)"
            class="hidden sm:flex items-center justify-center min-w-6 h-6 px-0.5 mr-1 transition-colors duration-300 bg-white hover:bg-secondary-300 hover:text-white rounded-full text-xs font-bold text-gray-700"
            x-text="page"></button>
    </template>
</template>

{{-- 次へ --}}
<template x-if="currentPage === lastPage">
    <span class="flex items-center justify-center w-6 h-6 text-gray-400 text-sm">
        <i class="fa-solid fa-caret-right fa-fw"></i>
    </span>
</template>
<template x-if="currentPage !== lastPage">
    <button type="button" @click="goToPage(currentPage + 1)"
        class="flex items-center justify-center w-6 h-6 text-gray-400 text-sm transition-colors duration-300 hover:bg-secondary-300 hover:text-white rounded-full">
        <i class="fa-solid fa-caret-right fa-fw"></i>
    </button>
</template>