@php
    use App\Support\PermissionCatalog;
    $r = $role ?? null;
    $selected = old('permissions', $r ? $r->permissions->pluck('name')->all() : []);
    $byName = $permissions->keyBy('name');
    $groups = PermissionCatalog::groups();
@endphp
<div class="space-y-4">
    <div>
        <label class="admin-label">{{ __('admin.name') }}</label>
        <input name="name" value="{{ old('name', $r?->name) }}" class="admin-input" required />
    </div>
    <div>
        <label class="admin-label">{{ __('admin.permissions') }}</label>
        <div class="mt-3 max-h-[62rem] space-y-4 overflow-y-auto rounded-xl border border-slate-200 p-4">
            @foreach ($groups as $groupKey => $names)
                @php
                    $items = collect($names)->filter(fn ($n) => $byName->has($n));
                @endphp
                @continue($items->isEmpty())
                <section class="rounded-lg border border-slate-100 bg-slate-50/80 p-3">
                    <h3 class="mb-2 text-sm font-bold text-slate-800">{{ PermissionCatalog::groupLabel($groupKey) }}</h3>
                    <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($items as $name)
                            <label class="flex items-center gap-2 text-sm text-slate-700">
                                <input
                                    type="checkbox"
                                    name="permissions[]"
                                    value="{{ $name }}"
                                    @checked(in_array($name, $selected, true))
                                    class="rounded border-slate-300"
                                />
                                <span>{{ PermissionCatalog::label($name) }}</span>
                            </label>
                        @endforeach
                    </div>
                </section>
            @endforeach
        </div>
    </div>
</div>