@php
    $groups = $permissions->groupBy(fn ($permission) => str_replace('_', ' ', explode('.', $permission->name)[0]));
@endphp
<div data-permission-picker>
    <div class="pw-picker-tools"><input type="search" placeholder="Search permissions" aria-label="Search permissions" data-permission-search><button type="button" class="btn btn-mlk-outline" data-permission-select>Select Visible</button><button type="button" class="btn btn-mlk-outline" data-permission-clear>Clear All</button></div>
    <p class="pw-picker-count" data-permission-count role="status">{{ count($selectedPermissions) }} permissions selected</p>
    <div class="pw-permission-grid">
        @foreach($groups as $group => $groupPermissions)
            <section class="pw-permission-group" data-permission-group aria-labelledby="permission-group-{{ $loop->index }}"><div class="pw-permission-header"><h3 id="permission-group-{{ $loop->index }}">{{ ucwords($group) }}</h3><button type="button" data-permission-toggle>Select group</button></div><div class="pw-permission-options">
                @foreach($groupPermissions as $permission)<label class="pw-permission-item" for="permission-{{ $permission->id }}" data-permission-item="{{ $permission->name }}"><input id="permission-{{ $permission->id }}" type="checkbox" name="permissions[]" value="{{ $permission->name }}" @checked(in_array($permission->name, $selectedPermissions, true))><span>{{ $permission->name }}</span></label>@endforeach
            </div></section>
        @endforeach
    </div>
    <div class="pw-empty" data-permission-empty hidden><i class="bx bx-search" aria-hidden="true"></i><h2>{{ $permissions->isEmpty() ? 'No permissions available' : 'No matching permissions' }}</h2><p>@if($permissions->isEmpty())<a href="/permissions/add_permission">Add a permission</a> to get started. @else Try another module or permission name. @endif</p></div>
</div>