@php
    use App\Enums\ListLimitEnum;
@endphp
@props([
    'paginatorDataName' => 'items',
    'showTotals' => true,
    'totalCountTitle' => '検索結果の件数: ',
    'showLimitSelector' => true,
    'onLimitChange' => 'onLimitChange',
    'onPaginatorClick' => 'onPaginatorClick',
])
<div class="paginator my-1 flex justify-between items-center text-gray-700">
    <div class="w-60 text-md pl-1 text-sm">
        @if ($showTotals)
            <p>{{ $totalCountTitle }}<span x-text="numberFormat({{ $paginatorDataName }}.total)"></span>件</p>
        @endif
    </div>
    <nav aria-label="">
        <ul class="list-style-none flex">
            <li><a x-on:click.prevent="{{ $onPaginatorClick }}($el)"
                    :class="{
                        'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-slate-700 hover:text-white': items
                            .current_page != 1
                    }"
                    class="rounded-md block w-10 h-10 flex items-center justify-center"
                    :href="{{ $paginatorDataName }}.current_page != 1 ? {{ $paginatorDataName }}.first_page_url : null">
                    <x-heroicon-o-chevron-double-left class="w-6 h-6" />
                </a></li>
            <li><a x-on:click.prevent="{{ $onPaginatorClick }}($el)"
                    :class="{
                        'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-slate-700 hover:text-white': items
                            .prev_page_url
                    }"
                    class="rounded-md block w-10 h-10 flex items-center justify-center"
                    :href="{{ $paginatorDataName }}.prev_page_url">
                    <x-heroicon-o-chevron-left class="w-6 h-6" />
                </a></li>
            <template x-for="link in {{ $paginatorDataName }}.links.filter(link => /[0-9\.]+/.test(link.label))">
                <li><a x-on:click.prevent="{{ $onPaginatorClick }}($el)"
                        :class="{
                            'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-slate-700 hover:text-white':
                                !link.active && link.url,
                            'bg-slate-700 text-white': link.active && link.url
                        }"
                        class="rounded-md block w-10 h-10 flex items-center justify-center"
                        :href="link.active ? null : link.url" x-text="link.label">
                    </a></li>
            </template>
            <li><a x-on:click.prevent="{{ $onPaginatorClick }}($el)"
                    :class="{
                        'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-slate-700 hover:text-white': items
                            .next_page_url
                    }"
                    class="rounded-md block w-10 h-10 flex items-center justify-center"
                    :href="{{ $paginatorDataName }}.next_page_url">
                    <x-heroicon-o-chevron-right class="w-6 h-6" />
                </a></li>
            <li><a x-on:click.prevent="{{ $onPaginatorClick }}($el)"
                    :class="{
                        'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150 hover:bg-slate-700 hover:text-white': items
                            .current_page != {{ $paginatorDataName }}.last_page
                    }"
                    class="rounded-md block w-10 h-10 flex items-center justify-center"
                    :href="{{ $paginatorDataName }}.current_page != {{ $paginatorDataName }}.last_page ?
                        {{ $paginatorDataName }}.last_page_url : null">
                    <x-heroicon-o-chevron-double-right class="w-6 h-6" />
                </a></li>
        </ul>
    </nav>
    <div class="limit w-60">
        @if ($showLimitSelector)
            <div class="mt-1 flex space-x-2 items-center justify-end">
                <x-input-label for="limit" :value="__('1ページあたりの件数')" />
                <x-select-input name="limit" class="" x-on:change="{{ $onLimitChange }}($el)"
                    x-model="{{ $paginatorDataName }}.per_page" :options="ListLimitEnum::getDropdownOptions()" />
            </div>
        @endif
    </div>
</div>