Account Table Pagination

<div class="flex justify-between items-start pt-6">
    <p class="text-body-sm text-black/64">
        <span class="font-bold">0</span>
        article
    </p>

    <div class="flex items-center">
        <div class="flex flex-col w-full gap-y-1 field field-reserved">
            <div x-data="selectlimiterOptions" class="input-wrapper input-wrapper-select flex flex-col relative w-full  ">

                <button type="button" @click="openSelect" x-ref="selectButton" class="form-select w-full peer flex justify-between btn gap-x-2 
                
                
                " :class="selected ? 'option-selected' : ''">
                    <label for="limiterOptions" class="text-body-xs text-black/72 flex items-center ">
                        <span>Afficher</span>
                    </label>
                    <span class="flex flex-row items-center gap-2">
                        <template x-if="selected && selected.type === 'leading-icon'">
                            <img :src="selected.image" :alt="selected.name">
                        </template>
                        <span x-text="selected ? selected.name : ''">

                        </span>
                    </span>
                    <span class="transition-all transform flex items-center" :class="{'rotate-180' : show}">
                        <svg class=" shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />

                        </svg> </span>
                </button>

                <div class="dropdown-content relative w-full overflow-auto max-h-screen-40" x-show="show" x-transition x-cloak @click.outside="show = false" x-anchor.bottom-start.offset.0="$refs.selectButton">
                    <template x-for="option in options">
                        <div>
                            <template x-if="option.type === 'group'">
                                <div class="item-category text-brand-700 font-bold">
                                    <div class="dropdown-item-category p-2">
                                        <span class="flex-1" x-text="option.name"></span>
                                    </div>
                                </div>
                            </template>

                            <template x-if="option.type !== 'group'">
                                <div @click="select(option.id)" :class="option.checked ? 'selected' : ''">

                                    <template x-if="option.href">
                                        <div>
                                            <a :href="option.href" class="dropdown-item cursor-pointer p-2">
                                                <template x-if="option.image">
                                                    <img :src="option.image" :alt="option.name">
                                                </template>

                                                <span class="flex-1" x-text="option.name"></span>
                                                <template x-if="option.checked">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                        <path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
                                                    </svg>
                                                </template>
                                            </a>
                                        </div>
                                    </template>

                                    <template x-if="!option.href">
                                        <div class="dropdown-item cursor-pointer p-2">
                                            <template x-if="option.image">
                                                <img :src="option.image" :alt="option.name">
                                            </template>

                                            <span class="flex-1" x-text="option.name"></span>
                                            <template x-if="option.checked">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                                    <path d="M21 2H3C2.4 2 2 2.4 2 3V21C2 21.6 2.4 22 3 22H21C21.6 22 22 21.6 22 21V3C22 2.4 21.6 2 21 2ZM17.7 9.3L10.9 16.1C10.5 16.5 9.9 16.5 9.5 16.1L6.3 12.9C5.9 12.5 5.9 11.9 6.3 11.5C6.7 11.1 7.3 11.1 7.7 11.5L10.2 14L16.3 7.9C16.7 7.5 17.3 7.5 17.7 7.9C18.1 8.3 18.1 8.9 17.7 9.3Z" fill="#34A5C3" />
                                                </svg>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
                <select class="sr-only " id="limiterOptions" id="limiter">
                    <option value="" selected disabled hidden></option>
                    <option value="10" selected="selected">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </div>
        </div>

        <script>
            function selectlimiterOptions() {
                return {
                    rawOptions: [{
                        "value": "10",
                        "text": "10",
                        "selected": true
                    }, {
                        "value": "20",
                        "text": "20"
                    }, {
                        "value": "50",
                        "text": "50"
                    }],
                    options: [],
                    show: false,
                    selected: null,
                    init() {
                        Array.from(this.rawOptions).forEach(option => {
                            if (!option.disabled) {
                                this.options.push({
                                    id: option.value,
                                    name: option.text,
                                    checked: option.selected,
                                    image: option.image,
                                    href: option.href,
                                    type: option.type,
                                })
                            }
                            if (option.selected && option.value) {
                                this.select(option.value);
                            }
                        });
                    },
                    openSelect() {
                        this.show = !this.show;
                    },
                    select(id) {
                        this.options = this.options.map(option => {
                            if (option.id === id) {
                                option.checked = true;
                                this.selected = option;
                            } else {
                                option.checked = false;
                            }
                            return option;
                        });
                        document.getElementById('limiterOptions').value = this.selected.id;
                        this.show = false;
                    }
                }
            }
        </script>
    </div>
</div>