<div class="permissions-picker" ...attributes>
    <div class="mb-2 flex items-center justify-between">
        <div class="flex items-center">
            <div class="permission-picker-search">
                <Input
                    @type="text"
                    {{on "input" (perform this.search)}}
                    placeholder={{t "iam.components.permission-picker.search-permissions-keyword"}}
                    class="w-64 form-input form-input-sm"
                    disabled={{@disabled}}
                />
            </div>
            <div>
                {{#if this.isLoading}}
                    <div class="mx-2">
                        <Spinner @iconClass="text-sky-500" />
                    </div>
                {{/if}}
            </div>
            <div>
                <a href="javascript:;" class="ml-2 text-xs text-blue-500 hover:opacity-50" {{on "click" this.toggleSelected}}>Toggle Selected</a>
            </div>
        </div>
        <div class="text-xs dark:text-gray-100">
            {{t "iam.components.permission-picker.selected"}}
            {{this.selected.length}}
        </div>
    </div>
    <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-700 dark:border-gray-900 text-xs">
        <div class="w-full dark:bg-gray-800">
            <div class="grid grid-cols-12 text-xs px-3 py-1.5 font-bold text-sm text-gray-800 dark:text-gray-100 border-b border-gray-200 dark:border-gray-900 shadow">
                <div class="flex items-center">
                    <Checkbox @value={{this.allSelected}} @onToggle={{this.selectAll}} @disabled={{or @disabled (not this.permissions)}} />
                </div>
                <div class="col-span-5 flex items-center">{{t "iam.common.permission"}}</div>
                <div class="col-span-6 flex items-center">{{t "iam.common.description"}}</div>
            </div>
        </div>
        <div class="h-48 overflow-y-scroll">
            {{#unless this.isPermissionsLoaded}}
                <div class="flex text-center items-center justify-center py-4 dark:text-gray-100">
                    <div class="mr-2">
                        <Spinner @iconClass="text-sky-500" />
                    </div>
                    <span>{{t "iam.components.permission-picker.loading-permission"}}</span>
                </div>
            {{/unless}}
            {{#each this.permissions as |permission|}}
                <div
                    class="grid grid-cols-12 text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100
                        {{if @disabled 'opacity-50'}}
                        {{if (and this.showSelectedOnly (not permission.selected)) 'hidden'}}"
                >
                    <div class="flex items-center">
                        <Checkbox @value={{permission.selected}} @onToggle={{fn this.selectPermission permission}} @disabled={{@disabled}} />
                    </div>
                    <div class="col-span-5 flex items-center truncate">{{permission.name}}</div>
                    <div class="col-span-6 flex items-center truncate text-xs">{{permission.description}}</div>
                </div>
            {{/each}}
        </div>
    </div>
</div>