@php
    $isAdminRole = isset($role) && $role->name === 'admin';
@endphp

<x-ui.input
    name="name"
    :label="__('lang.role_name')"
    :value="$role->name ?? null"
    :hint="$isAdminRole ? __('lang.role_admin_name_locked') : null"
    required
    :readonly="$isAdminRole"
/>

<div class="d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
    <div class="form-check form-check-reverse mb-0">
        <input type="checkbox" class="form-check-input" id="permissions-select-all">
        <label class="form-check-label fw-semibold" for="permissions-select-all">{{ __('lang.select_all') }}</label>
    </div>

    <div class="app-search" style="max-width: 16rem;">
        <i class="bi bi-search app-search-icon"></i>
        <input type="text" id="permissions-search" class="app-search-input" placeholder="{{ __('lang.search_placeholder') }}">
    </div>
</div>

<div class="row">
@foreach ($permissionGroups as $group => $groupPermissions)
    <div class="col-6 col-md-4 col-lg-3 permission-group mb-4" data-permission-group-label="{{ __('lang.permission_group_'.str_replace('-', '_', $group)) }}">
        <div class="d-flex align-items-center gap-2 mb-2 pb-2 border-bottom">
            <div class="form-check form-check-reverse mb-0">
                <input type="checkbox" class="form-check-input permission-group-toggle" id="group-select-{{ $group }}">
                <label class="form-check-label h6 fw-semibold mb-0 fw-bold" for="group-select-{{ $group }}">
                    {{ __('lang.permission_group_'.str_replace('-', '_', $group)) }}
                </label>
            </div>
        </div>

        <div class="d-flex flex-wrap gap-3">
            @foreach ($groupPermissions as $permission)
                @php
                    $action = explode('.', $permission->name)[1] ?? $permission->name;
                    $actionLabel = __('lang.permission_action_'.str_replace('-', '_', $action));
                    $checked = old('permissions')
                        ? in_array($permission->name, old('permissions'), true)
                        : (isset($role) && $role->hasPermissionTo($permission));
                @endphp
                <div class="form-check form-check-reverse permission-item" data-permission-label="{{ $actionLabel }}">
                    <input
                        type="checkbox"
                        class="form-check-input permission-checkbox"
                        name="permissions[]"
                        value="{{ $permission->name }}"
                        id="permission-{{ $permission->id }}"
                        data-permission-group="{{ $group }}"
                        {{ $checked ? 'checked' : '' }}
                    >
                    <label class="form-check-label fs-11" for="permission-{{ $permission->id }}">
                        {{ $actionLabel }}
                    </label>
                </div>
            @endforeach
        </div>
    </div>
@endforeach
</div>