@section('title', 'مدیریت دسترسی ها')
<div>
    <div>
        <div class="card">
            <div class="card-header">مدیریت دسترسی ها
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <input type="text" wire:model.debounce.500ms="search" class="form-control mb-3"
                            placeholder="جستجوی نقش...">

                        <ul class="list-group">
                            @foreach ($roles as $role)
                                <li class="list-group-item d-flex justify-content-between align-items-center {{ $selectedRoleId === $role->id ? 'active text-white' : '' }}"
                                    wire:click="selectRole({{ $role->id }})" style="cursor: pointer;">
                                    <span>{{ $role->label ?? $role->name }}</span>
                                    <span class="badge bg-secondary">{{ $role->permissions_count }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div class="col-md-8">
                        @livewire('admin.permission-manager.role-form', key($selectedRoleId ?: 'new'))
                    </div>
                    <hr class="my-4">
                    <div class="row">
                        <div class="col-md-12">
                            @livewire('admin.permission-manager.permission-list')
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>