@php
    $actionGroups = collect($permissionActions)->groupBy('group');
@endphp

<div class="space-y-4">
    <div>
        <p class="field-label text-xs mb-2">Pages (sidebar visibility)</p>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-2">
            @foreach ($permissionPages as $key => $label)
                <label class="flex items-center gap-2 text-sm text-themed-muted cursor-pointer">
                    <input type="checkbox"
                           name="pages[]"
                           value="{{ $key }}"
                           @checked(in_array($key, $selectedPages, true))
                           class="rounded border-themed">
                    <span>{{ $label }}</span>
                </label>
            @endforeach
        </div>
    </div>

    <div>
        <p class="field-label text-xs mb-2">Actions (create, edit, delete, etc.)</p>
        <div class="space-y-4">
            @foreach ($actionGroups as $group => $actions)
                <div>
                    <p class="text-xs font-medium text-themed-muted mb-2">{{ $group }}</p>
                    <div class="grid sm:grid-cols-2 gap-2">
                        @foreach ($actions as $key => $meta)
                            <label class="flex items-start gap-2 text-sm text-themed-muted cursor-pointer">
                                <input type="checkbox"
                                       name="actions[]"
                                       value="{{ $key }}"
                                       @checked(in_array($key, $selectedActions, true))
                                       class="rounded border-themed mt-0.5">
                                <span>{{ $meta['label'] }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>