<div>
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <strong>Kullanıcılar</strong>

            <div class="input-group w-25 position-relative">
                <input type="text" class="form-control" placeholder="Ara..." wire:model.live="search">
                <div class="position-relative top-0 end-0 mt-1 me-2" wire:loading>
                    <div class="spinner-border" role="status" style="margin-left:10px;">
                        <span class="visually-hidden">Yükleniyor...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card-body">
        <div class="example">
            <div class="tab-content rounded-bottom">
                <div class="tab-pane active preview" role="tabpanel" id="preview-1005">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">E-Posta</th>
                                <th scope="col">Ad</th>
                                
                                <th scope="col">Rol</th>
                                @canany(['user.update', 'user.delete'])
                                    <th scope="col">İşlem</th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($users as $user)
                                <tr wire:key="item-{{ $user->id }}">
                                    <td>{{ $user->email }}</td>
                                    <td>{{ $user->name }}</td>
                                    
                                    <td>
                                        <span class="badge bg-primary" style="text-transform: capitalize;">{{ str_replace("-", " ", $user->roles?->first()?->name) }}</span>
                                    </td>
                                    @canany(['user.update', 'user.delete'])
                                    <td>
                                        <div style="display: flex; justify-content: start; align-items: center; text-align: center; gap: 20px;">

                                            @can('user.update')
                                                <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-sm btn-outline-primary">
                                                    <span class="cil-pencil"></span>
                                                </a>
                                            @endcan

                                            @can('user.delete')
                                                <button
                                                    type="button"
                                                    wire:click="deleteConfirm({{ $user->id }})"
                                                    wire:loading.attr="disabled"
                                                    class="btn btn-sm btn-outline-secondary text-secondary"
                                                >
                                                    <span class="cil-trash"></span>
                                                </button>
                                            @endcan
                                            
                                        </div>

                                    </td>
                                    @endcanany
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="px-4">
        {{ $users->links() }}
    </div>
</div>
