Full Pagination

<div class="font-semibold">Usable</div>
<!-- Carousel Audio -->
<div x-data="carousel()" class="flex gap-4">
    <!-- Chevron Left -->
    <span @click="prevSlide()" :disabled="currentIndex === 0"
          class="flex cursor-pointer items-center justify-center w-10 h-10 bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#891315"/>
        </svg>
    </span>

    <!-- Chevron Right -->
    <span @click="nextSlide()" :disabled="currentIndex === totalSlides - 1"
          class="flex items-center cursor-pointer justify-center w-10 h-10 bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
        </svg>
    </span>

    <!-- Dots -->
    <div class="relative flex items-center mx-2 w-44 h-10 px-4 bg-audio-700/5 rounded-full overflow-hidden">
        <!-- Dots -->
        <div class="flex justify-center space-x-2">
            <template x-for="index in totalSlides" :key="index">
            <span @click="goToSlide(index - 1)"
                  :class="currentIndex === index - 1 ? 'w-8 bg-audio-900' : 'w-2 bg-audio-700/60'"
                  class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
            </template>
        </div>
    </div>

</div>

<script>
    function carousel() {
        return {
            currentIndex: 0,
            totalSlides: 7,
            nextSlide() {
                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
            },
            prevSlide() {
                this.currentIndex = (this.currentIndex - 1 + this.totalSlides) % this.totalSlides;
            },
            goToSlide(index) {
                this.currentIndex = index;
            }
        };
    }
</script>

<!-- Carousel Optic (don't forget to take the carousel() script line 33 to 49 -->
<div x-data="carousel()" class="flex mt-4 gap-4">
    <!-- Chevron Left -->
    <span @click="prevSlide()" :disabled="currentIndex === 0"
          class="flex cursor-pointer items-center justify-center w-10 h-10 bg-black/5 hover:bg-black/10 active:bg-black/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black"/>
        </svg>
    </span>

    <!-- Chevron Right -->
    <span @click="nextSlide()" :disabled="currentIndex === totalSlides - 1"
          class="flex items-center cursor-pointer justify-center w-10 h-10 bg-black/5 hover:bg-black/10 active:bg-black/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black"/>
        </svg>
    </span>

    <!-- Dots -->
    <div class="relative flex items-center mx-2 w-44 h-10 px-4 bg-black/5 rounded-full overflow-hidden">
        <!-- Dots -->
        <div class="flex justify-center space-x-2">
            <template x-for="index in totalSlides" :key="index">
            <span @click="goToSlide(index - 1)"
                  :class="currentIndex === index - 1 ? 'w-8 bg-black' : 'w-2 bg-black/60'"
                  class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
            </template>
        </div>
    </div>

</div>

<!-- Pager Audio -->
<div x-data="pager()" class="flex gap-4 items-center mt-4">
    <!-- Chevron Left -->
    <span @click="prevPage()" :disabled="currentPage === 1"
          class="flex items-center justify-center w-10 h-10 bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20 rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#C70C0F"/>
        </svg>
    </span>

    <!-- Pages -->
    <div class="relative flex gap-4 items-center">
        <!-- Page Numbers -->
        <template x-for="index in totalPages" :key="index">
            <span @click="goToPage(index)"
                  :class="currentPage === index ? 'text-audio-700/80 relative' : 'text-audio-700/60'"
                  class="flex items-center justify-center font-semibold cursor-pointer px-2">
                <span x-text="index"></span>
                <!-- Active Border (individual for each element) -->
                <span x-show="currentPage === index" class="absolute bottom-[-2px] left-0 right-0 h-[1px] bg-audio-900 rounded-full"></span>
            </span>
        </template>
    </div>

    <!-- Chevron Right -->
    <span @click="nextPage()" :disabled="currentPage === totalPages"
          class="flex items-center justify-center w-10 h-10 bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20 rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
        </svg>
    </span>
</div>

<script>
    function pager() {
        return {
            currentPage: 1,
            totalPages: 10,
            borderWidth: 24,
            gap: 16,
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                }
            },
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                }
            },
            goToPage(index) {
                this.currentPage = index;
            }
        };
    }
</script>

<!-- Pager Optic (don't forget to take the pager() script line 116 to 138-->
<div x-data="pager()" class="flex gap-4 items-center mt-4">
    <!-- Chevron Left -->
    <span @click="prevPage()" :disabled="currentPage === 1"
          class="flex items-center justify-center w-10 h-10 bg-black/5 hover:bg-black/10 active:bg-black/20 rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black"/>
        </svg>
    </span>

    <!-- Pages -->
    <div class="relative flex gap-4 items-center">
        <!-- Page Numbers -->
        <template x-for="index in totalPages" :key="index">
            <span @click="goToPage(index)"
                  :class="currentPage === index ? 'text-black/80 relative' : 'text-black/60'"
                  class="flex items-center justify-center font-semibold cursor-pointer px-2">
                <span x-text="index"></span>
                <!-- Active Border (individual for each element) -->
                <span x-show="currentPage === index" class="absolute bottom-[-2px] left-0 right-0 h-[1px] bg-black rounded-full"></span>
            </span>
        </template>
    </div>

    <!-- Chevron Right -->
    <span @click="nextPage()" :disabled="currentPage === totalPages"
          class="flex items-center justify-center w-10 h-10 bg-black/5 hover:bg-black/10 active:bg-black/20 rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black"/>
        </svg>
    </span>
</div>

<!-- Carousel Audio Autoplay (script carousel with autoplay below) -->
<div x-data="carousel()" x-init="startAutoplay()" class="flex mt-4 gap-4">
    <!-- Chevron Left -->
    <span @click="prevSlide(); resetAutoplay()" :disabled="currentIndex === 0"
          class="flex cursor-pointer items-center justify-center w-10 h-10 bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#891315"/>
        </svg>
    </span>

    <!-- Chevron Right -->
    <span @click="nextSlide(); resetAutoplay()" :disabled="currentIndex === totalSlides - 1"
          class="flex items-center cursor-pointer justify-center w-10 h-10 bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
        </svg>
    </span>

    <!-- Dots -->
    <div class="relative flex items-center mx-2 w-44 h-10 px-4 bg-audio-700/5 rounded-full overflow-hidden">
        <!-- Dots -->
        <div class="flex justify-center space-x-2">
            <template x-for="index in totalSlides" :key="index">
            <span @click="goToSlide(index - 1); resetAutoplay()"
                  :class="currentIndex === index - 1 ? 'w-8 bg-audio-900' : 'w-2 bg-audio-700/60'"
                  class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
            </template>
        </div>
    </div>
</div>

<!-- Carousel Optic Autoplay (script carousel with autoplay below) -->
<div x-data="carousel()" x-init="startAutoplay()" class="flex mt-4 gap-4">
    <!-- Chevron Left -->
    <span @click="prevSlide(); resetAutoplay()" :disabled="currentIndex === 0"
          class="flex cursor-pointer items-center justify-center w-10 h-10 bg-black/5 hover:bg-black/10 active:bg-black/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black"/>
        </svg>
    </span>

    <!-- Chevron Right -->
    <span @click="nextSlide(); resetAutoplay()" :disabled="currentIndex === totalSlides - 1"
          class="flex items-center cursor-pointer justify-center w-10 h-10 bg-black/5 hover:bg-black/10 active:bg-black/20 rounded-full">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black"/>
        </svg>
    </span>

    <!-- Dots -->
    <div class="relative flex items-center mx-2 w-44 h-10 px-4 bg-black/5 rounded-full overflow-hidden">
        <!-- Dots -->
        <div class="flex justify-center space-x-2">
            <template x-for="index in totalSlides" :key="index">
            <span @click="goToSlide(index - 1); resetAutoplay()"
                  :class="currentIndex === index - 1 ? 'w-8 bg-black' : 'w-2 bg-black/60'"
                  class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
            </template>
        </div>
    </div>
</div>

<script>
    function carousel() {
        return {
            currentIndex: 0,
            totalSlides: 7,
            autoplayInterval: null,
            nextSlide() {
                this.currentIndex = (this.currentIndex + 1) % this.totalSlides;
            },
            prevSlide() {
                if (this.currentIndex > 0) {
                    this.currentIndex--;
                } else {
                    this.currentIndex = this.totalSlides - 1;
                }
            },
            goToSlide(index) {
                this.currentIndex = index;
            },
            startAutoplay() {
                this.autoplayInterval = setInterval(() => {
                    this.nextSlide();
                }, 1500); // Change slide every 1,5 seconds
            },
            stopAutoplay() {
                clearInterval(this.autoplayInterval);
            },
            resetAutoplay() {
                this.stopAutoplay();
                this.startAutoplay();
            }
        };
    }
</script>

<div class="bg-[#383838] w-fit rounded-lg">
    <div class="p-8 mt-4">
        <!-- Carousel Optic Light -->
        <div x-data="carousel()" class="flex mt-4 gap-4">
            <!-- Chevron Left -->
            <span @click="prevSlide()" :disabled="currentIndex === 0"
                  class="flex cursor-pointer items-center justify-center w-10 h-10 bg-neutral-500 hover:bg-white/40 active:bg-white/50 rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z"
                    fill="white"/>
                </svg>
            </span>

            <!-- Chevron Right -->
            <span @click="nextSlide()" :disabled="currentIndex === totalSlides - 1"
                  class="flex items-center cursor-pointer justify-center w-10 h-10 bg-neutral-500 hover:bg-white/40 active:bg-white/50 rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z"
                    fill="white"/>
                </svg>
            </span>

            <!-- Dots -->
            <div class="relative flex items-center mx-2 w-44 h-10 px-4 bg-neutral-500 rounded-full overflow-hidden">
                <!-- Dots -->
                <div class="flex justify-center space-x-2">
                    <template x-for="index in totalSlides" :key="index">
                        <span @click="goToSlide(index - 1)"
                        :class="currentIndex === index - 1 ? 'w-8 bg-white' : 'w-2 bg-white/60'"
                        class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
                    </template>
                </div>
            </div>
        </div>
        <!-- Carousel Optic Light Autoplay -->
        <div x-data="carousel()" x-init="startAutoplay()" class="flex mt-4 gap-4">
            <!-- Chevron Left -->
            <span @click="prevSlide(); resetAutoplay()" :disabled="currentIndex === 0"
                  class="flex cursor-pointer items-center justify-center w-10 h-10 bg-neutral-500 hover:bg-white/40 active:bg-white/50 rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z"
                    fill="white"/>
                </svg>
            </span>

            <!-- Chevron Right -->
            <span @click="nextSlide(); resetAutoplay()" :disabled="currentIndex === totalSlides - 1"
                  class="flex items-center cursor-pointer justify-center w-10 h-10 bg-neutral-500 hover:bg-white/40 active:bg-white/50 rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z"
                    fill="white"/>
                </svg>
            </span>

            <!-- Dots -->
            <div class="relative flex items-center mx-2 w-44 h-10 px-4 bg-neutral-500 rounded-full overflow-hidden">
                <!-- Dots -->
                <div class="flex justify-center space-x-2">
                    <template x-for="index in totalSlides" :key="index">
                        <span @click="goToSlide(index - 1); resetAutoplay()"
                        :class="currentIndex === index - 1 ? 'w-8 bg-white' : 'w-2 bg-white/60'"
                        class="h-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"></span>
                    </template>
                </div>
            </div>
        </div>
        <!-- Pager Optic light (don't forget to take the pager() script line 116 to 138-->
        <div x-data="pager()" class="flex gap-4 items-center mt-4">
            <!-- Chevron Left -->
            <span @click="prevPage()" :disabled="currentPage === 1"
                  class="flex items-center justify-center w-10 h-10 bg-neutral-500 hover:bg-white/40 active:bg-white/50 rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white"/>
        </svg>
    </span>

            <!-- Pages -->
            <div class="relative flex gap-4 items-center">
                <!-- Page Numbers -->
                <template x-for="index in totalPages" :key="index">
                    <span @click="goToPage(index)"
                          :class="currentPage === index ? 'text-white/80 relative' : 'text-white/60'"
                          class="flex items-center justify-center font-semibold cursor-pointer px-2">
                    <span x-text="index"></span>
                    <!-- Active Border (individual for each element) -->
                    <span x-show="currentPage === index" class="absolute bottom-[-2px] left-0 right-0 h-[1px] bg-white rounded-full"></span>
                    </span>
                </template>
            </div>

            <!-- Chevron Right -->
            <span @click="nextPage()" :disabled="currentPage === totalPages"
                  class="flex items-center justify-center w-10 h-10 bg-neutral-500 hover:bg-white/40 active:bg-white/50 rounded-full cursor-pointer disabled:opacity-50 disabled:pointer-events-none">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white"/>
        </svg>
    </span>
        </div>
    </div>
</div>

<div class="font-semibold mt-8">Mockup</div>
<div class="border border-dashed border-violet-700 rounded-lg w-fit">
    <div class="flex flex-col gap-4">
        <!-- Audio pager -->
        <div class="mt-4 flex gap-4 m-4 justify-center">
            <!-- Chevron Left disabled -->
            <span class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#C70C0F" fill-opacity="0.6"/>
                </svg>
            </span>
            <span class="flex items-center justify-center font-semibold text-audio-700/80 px-2 border-b border-audio-700/80">1</span>
            <span class="flex items-center justify-center font-semibold text-audio-700/60">2</span>
            <span class="flex items-center justify-center font-semibold text-audio-700/60">3</span>
            <span class="flex items-center justify-center font-semibold text-audio-700/60">...</span>
            <span class="flex items-center justify-center font-semibold text-audio-700/60">10</span>
            <!-- Chevron Right usable -->
            <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20
                            rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
                </svg>
            </span>
        </div>
        <!-- Audio carousel dots-->
        <div class="mt-4 flex gap-4 m-4 justify-center">
            <!-- Chevron Left disabled -->
            <span class="flex items-center justify-center w-10 h-10 bg-audio-700/5 rounded-full">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="#C70C0F" fill-opacity="0.6"/>
                </svg>
            </span>
            <!-- Chevron Left usable -->
            <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-audio-700/5 hover:bg-audio-700/10 active:bg-audio-700/20
                            rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="#891315"/>
                </svg>
            </span>
            <span class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-audio-700/5 rounded-full">
                <span class="flex flex-row gap-2">
                    <span class="w-8 h-2 bg-audio-900 rounded-full"></span>
                    <span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-audio-700/60 rounded-full"></span>
                </span>
            </span>
        </div>
        <!-- Optic Pager -->
        <div class="mt-4 flex gap-4 m-4 justify-center">
            <!-- Chevron Left disabled -->
            <span class="flex items-center justify-center w-10 h-10 bg-black/5 rounded-full">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.6"/>
                </svg>
            </span>
            <span class="flex items-center justify-center font-semibold text-black/80 px-2 border-b border-black/80">1</span>
            <span class="flex items-center justify-center font-semibold text-black/60">2</span>
            <span class="flex items-center justify-center font-semibold text-black/60">3</span>
            <span class="flex items-center justify-center font-semibold text-black/60">...</span>
            <span class="flex items-center justify-center font-semibold text-black/60">10</span>
            <!-- Chevron Right usable -->
            <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-black/5 hover:bg-black/10 active:bg-black/20
                            rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black"/>
                </svg>
            </span>
        </div>
        <!-- Optic carousel dots -->
        <div class="mt-4 flex gap-4 m-4 justify-center">
            <!-- Chevron Left disabled -->
            <span class="flex items-center justify-center w-10 h-10 bg-black/5 rounded-full">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="black" fill-opacity="0.6"/>
                </svg>
            </span>
            <!-- Chevron Left usable -->
            <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-black/5 hover:bg-black/10 active:bg-black/20
                            rounded-full"
            >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="black"/>
                </svg>
            </span>
            <span class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-black/5 rounded-full">
                <span class="flex">
                    <span class="w-8 h-2 bg-black rounded-full"></span>
                </span>
                <span class="flex flex-row gap-2">
                    <span class="w-2 h-2 bg-black/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-black/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-black/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-black/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-black/60 rounded-full"></span>
                    <span class="w-2 h-2 bg-black/60 rounded-full"></span>
                </span>
            </span>
        </div>
        <div class="bg-[#393939] rounded-b-lg">
            <!-- Optic Pager with dark bg-->
            <div class="mt-4 flex gap-4 m-4 justify-center">
                <!-- Chevron Left disabled -->
                <span class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" fill-opacity="0.6"/>
                    </svg>
                </span>
                <span class="flex items-center justify-center font-semibold text-white/80 px-2 border-b border-white/80">1</span>
                <span class="flex items-center justify-center font-semibold text-white/60">2</span>
                <span class="flex items-center justify-center font-semibold text-white/60">3</span>
                <span class="flex items-center justify-center font-semibold text-white/60">...</span>
                <span class="flex items-center justify-center font-semibold text-white/60">10</span>
                <!-- Chevron Right usable -->
                <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                            bg-neutral-500 hover:bg-white/40 active:bg-white/50
                            rounded-full"
                >
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white"/>
                    </svg>
                </span>
            </div>
            <!-- Optic carousel dots with dark bg-->
            <div class="mt-4 flex gap-4 m-4 justify-center">
                <!-- Chevron Left disabled -->
                <span class="flex items-center justify-center w-10 h-10 bg-neutral-500 rounded-full">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="white" fill-opacity="0.6"/>
                    </svg>
                </span>
                <!-- Chevron Left usable -->
                <span class="flex items-center justify-center w-10 h-10 cursor-pointer
                                bg-neutral-500 hover:bg-white/40 active:bg-white/50
                                rounded-full"
                >
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="white"/>
                    </svg>
                </span>
                <span class="flex flex-row items-center justify-center gap-2 mx-2 h-10 px-4 bg-neutral-500 rounded-full">
                    <span class="flex">
                        <span class="w-8 h-2 bg-white rounded-full"></span>
                    </span>
                    <span class="flex flex-row gap-2">
                        <span class="w-2 h-2 bg-white/60 rounded-full"></span>
                        <span class="w-2 h-2 bg-white/60 rounded-full"></span>
                        <span class="w-2 h-2 bg-white/60 rounded-full"></span>
                        <span class="w-2 h-2 bg-white/60 rounded-full"></span>
                        <span class="w-2 h-2 bg-white/60 rounded-full"></span>
                        <span class="w-2 h-2 bg-white/60 rounded-full"></span>
                    </span>
                </span>
            </div>
        </div>
    </div>
</div>