@props([
    'search' => false,
    'wireSearchModel' => null,
    'searchPlaceholder' => 'Search...',
    'perPageOptions' => [10, 25, 50, 100],
    'defaultPerPage' => 10,
    'customDropDown' => [],
    'title' => 'title'
])

<div>
    @if ($search || !empty($perPageOptions))
        <div class="flex flex-col sm:flex-row justify-between mb-4 gap-4">
            @if ($search)
                <div class="w-full sm:w-64 relative">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                    </div>

                    @if (isset($search) && $search instanceof \Illuminate\View\ComponentSlot)
                        {{ $search }}
                    @else
                        <input type="search"
                            @if ($wireSearchModel) wire:model.live.debounce.300ms="{{ $wireSearchModel }}" @endif
                            placeholder="{{ $searchPlaceholder }}"
                            class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" />
                    @endif
                </div>
            @endif

            @if (!empty($perPageOptions))
                <div class="flex items-center space-x-2">
                    <label for="table-per-page"
                        class="text-sm font-medium text-gray-700 dark:text-gray-300">Show</label>
                    <select id="table-per-page" wire:model.live="perPage"
                        class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                        @foreach ($perPageOptions as $option)
                            <option value="{{ $option }}">{{ $option }}</option>
                        @endforeach
                    </select>
                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">entries</span>
                </div>
            @endif
            @if (!empty($customDropDown))
                <div class="flex items-center space-x-2">
                    <label for="table-per-page"
                        class="text-sm font-medium text-gray-700 dark:text-gray-300">Exam</label>
                    <select id="table-per-page" wire:model.live="id"
                        class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-50">
                            <option value=""></option>
                        @foreach ($customDropDown as $option)
                            <option value="{{ $option['id'] }}">{{ $option[$title] }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
        </div>
    @endif

    <div class="overflow-x-auto relative border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm"
        style="overflow: visible;">
        <table
            class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm text-left text-gray-700 dark:text-gray-300">
            {{ $slot }}
        </table>
    </div>

    {{ $pagination ?? '' }}
</div>