@props(['perPageRouteName', 'data'])

<div class="flex flex-wrap gap-3 items-center justify-between pt-8 px-2">
    <div class="font-medium text-sm text-textColor dark:text-white flex items-center">
        <div class="border border-slate-200 dark:border-slate-700 p-2 rounded">
            <select class="dark:bg-slate-800" onChange="document.getElementById('filterForm').submit()" name="per_page"
                id="tableRow" class="dropdownTableSelect">
                <option value="10" @selected(request()->per_page == 10)>
                    {{ __('10') }}
                </option>
                <option value="25" @selected(request()->per_page == 25)>
                    {{ __('25') }}
                </option>
                <option value="50" @selected(request()->per_page == 50)>
                    {{ __('50') }}
                </option>
                 <option value="75" @selected(request()->per_page == 75)>
                    {{ __('75') }}
                </option>
                <option value="100" @selected(request()->per_page == 100 || !request()->per_page)>
                    {{ __('100') }}
                </option>
                <option value="{{ $data->total() }}" @selected(request()->per_page == $data->total())>
                    {{ __('All per page') }}
                </option>
            </select>
        </div>
    </div>
    <div>
        {{ $data->links() }}
    </div>
</div>