@props([
    'scopes',
    'checkedIds' => [],
    'inheritedIds' => [],
    'name' => 'permissions',
    'showInherited' => false,
])

<div class="permission-grid">
    @foreach($scopes as $scope)
        <div class="permission-box">
            <strong>{{ $scope->display_name }}</strong>
            @forelse($scope->permissions as $permission)
                @php
                    $checked = in_array($permission->id, $checkedIds, true);
                    $inherited = $showInherited && in_array($permission->id, $inheritedIds, true);
                @endphp
                <div class="perm-row {{ $inherited && ! $checked ? 'inherited' : '' }}">
                    <input
                        class="form-check-input"
                        type="checkbox"
                        name="{{ $name }}[{{ $permission->id }}]"
                        value="{{ $permission->id }}"
                        id="perm_{{ $name }}_{{ $permission->id }}"
                        @checked($checked)
                    >
                    <label class="form-check-label" for="perm_{{ $name }}_{{ $permission->id }}">
                        {{ ucfirst(str_replace('_', ' ', $permission->permission)) }}
                        @if($inherited && ! $checked)
                            <span class="text-muted">(from role)</span>
                        @endif
                    </label>
                </div>
            @empty
                <span class="text-muted small">No permissions defined.</span>
            @endforelse
        </div>
    @endforeach
</div>