<div>
    <!-- Start coding here -->
    <div class="overflow-hidden">
        <div class="d-flex justify-content-between align-items-center p-4">
            <div class="d-flex">
                <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
                    <div class="input-group">
                        <input class="form-control" type="text" placeholder="Search..." wire:model.live.debounce.300ms="search" required="" />
                        <!-- <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i></button> -->
                    </div>
                </form>
            </div>
            <div class="d-flex space-x-3">
                <div class="flex space-x-3 items-center">
                    <label class="w-40 text-sm font-medium text-gray-900">User Type :</label>
                    <select wire:model.live="status"
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                        <option value="">All</option>
                        <option value="1">Active</option>
                        <option value="0">Inactive</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">ID</th>
                        <th>Option</th>
                        <th>Name</th>
                        <th>Role</th>
                        <th>NID</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Photo</th>
                        <th>Status</th>
                        <th>Uploader</th>
                        <th>Created</th>
                    </tr>
                </thead>
                <tbody>
                    @if ($users->count() > 0)
                    <?php $sl = 1 ?>
                        @foreach ($users as $user)
                            <tr wire:key="{{ $user->id }}" class="border-b dark:border-gray-700">
                                <td scope="col" class="whitespace-nowrap">
                                    {{ $sl++ }}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button
                                        onclick="confirm('Are you sure you want to delete {{ $user->name }} ?') || event.stopImmediatePropagation()"
                                        wire:click="inactive({{ $user->id }})"
                                        class="btn btn-sm text-danger rounded"><i class="fas fa-trash"></i></button>
                                    </div>
                                </td>
                                <td>{{ $user->name }}</td>
                                <td>{{ $user->role }}</td>
                                <td>{{ $user->nid }}</td>
                                <td>{{ $user->phone }}</td>
                                <td>{{ $user->email }}</td>
                                <td><img src="{{Storage::url($user->photo)}}" loading="lazy" style="width:50px;height:45px;" alt="N/A"></td>
                                <td><span class="badge bg-primary">{{ $user->status==1 ? 'Active' : 'Inactive'}}</span> </td>
                                <td>{{ $user->uploader }}</td>
                                <td>{{ date("Y-m-d",strtotime($user->created_at) ) }}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="11" class="text-center">No results found.</td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        <div class="py-4 px-3">
            <div class="flex ">
                <div class="flex space-x-4 items-center mb-3">
                    <label class="w-32 text-sm font-medium text-gray-900">Per Page</label>
                    <select wire:model.live='perPage'
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                        <option value="5">5</option>
                        <option value="10" seleted>10</option>
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
            <div >
                {{ $users->links() }}
            </div>
        </div>
    </div>
</div>