<section x-data="{
rtl: false,
title: 'Dynamic Pagination',
description: 'A pagination component with full RTL support.'
}"
x-init="
const handleDirectionChange = (event) => { rtl = event.detail.isRtl; };
window.addEventListener('set-direction', handleDirectionChange);
if (document.documentElement.dir === 'rtl') { rtl = true; }
">
<div class="max-w-4xl mx-auto my-16 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-sm">
<div x-data="{ currentPage: 5, totalPages: 10 }" class="flex items-center justify-center space-x-2 rtl:space-x-reverse">
<button @click="currentPage = Math.max(1, currentPage - 1)" :disabled="currentPage === 1" class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" x-text="rtl ? 'السابق' : 'Previous'"></button>
<template x-for="page in Array.from({length: Math.min(5, totalPages)}, (_, i) => Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i)">
<button @click="currentPage = page" :class="page === currentPage ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600'" class="px-4 py-2 rounded transition-colors font-medium" x-text="page"></button>
</template>
<button @click="currentPage = Math.min(totalPages, currentPage + 1)" :disabled="currentPage === totalPages" class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" x-text="rtl ? 'التالي' : 'Next'"></button>
</div>
</div>
</section>