<div class="rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
    <div>
        <div class="rounded-md px-3 py-2">{{or @title "Custom Fields Manager"}}</div>
        <TabNavigation @tabs={{this.tabs}} @onTabChange={{perform this.loadCustomFields}} @contentClass="bg-gray-100 dark:bg-gray-800 px-4 py-2" as |activeTab|>
            {{#each this.subjects as |subject|}}
                <div class="subject-custom-fields {{if (eq activeTab.id subject.model) 'block' 'hidden'}}">
                    <div class="flex flex-row justify-end mb-4 space-x-4">
                        <Button @type="primary" @icon="square-plus" @text="New field group" @onClick={{fn this.createGroup subject}} @permission="fleet-ops update custom-field" />
                    </div>
                    <div class="space-y-4">
                        {{#each subject.groups as |group|}}
                            <ContentPanel @title={{group.name}} @open={{true}} @wrapperClass="bordered">
                                <div class="flex flex-row items-center space-x-2 mb-4">
                                    <Button
                                        @type="primary"
                                        @icon="square-plus"
                                        @text="Create new custom field"
                                        @onClick={{fn this.createCustomField subject group}}
                                        @permission="fleet-ops update custom-field"
                                    />
                                    <DropdownButton
                                        @text={{concat "Grid Size : " (or group.meta.grid_size 1)}}
                                        @textClass="text-sm mr-2"
                                        @buttonClass="flex-row-reverse w-44 justify-between"
                                        @icon="caret-down"
                                        @iconClass="mr-0i"
                                        @size="sm"
                                        @iconPrefix="fas"
                                        @triggerClass="hidden md:flex"
                                        @permission="fleet-ops update custom-field"
                                        as |dd|
                                    >
                                        <div class="next-dd-menu mt-1 mx-0" aria-labelledby="user-menu">
                                            <div class="p-1">
                                                {{#each this.gridSizeOptions as |size|}}
                                                    <a
                                                        href="javascript:;"
                                                        class="next-dd-item"
                                                        {{on "click" (dropdown-fn dd (perform this.setGridSize group size))}}
                                                        disabled={{cannot "fleet-ops update custom-field"}}
                                                    >
                                                        <div class="flex-1 flex flex-row items-center">
                                                            <div class="w-6">
                                                                <FaIcon @icon="grip" />
                                                            </div>
                                                            <span>{{size}}</span>
                                                        </div>
                                                        <div>
                                                            {{#if (eq size (or group.meta.grid_size 1))}}
                                                                <FaIcon @icon="check" class="text-green-500" />
                                                            {{/if}}
                                                        </div>
                                                    </a>
                                                {{/each}}
                                            </div>
                                        </div>
                                    </DropdownButton>
                                    <Button @type="danger" @icon="trash" @onClick={{fn this.deleteGroup group subject}} @permission="fleet-ops update custom-field" />
                                </div>
                                <div class="grid grid-cols-{{or group.meta.grid_size 1}} gap-2">
                                    {{#each group.customFields as |customField|}}
                                        <div
                                            class="rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-1.5 flex flex-row items-center justify-between
                                                {{unless customField.id 'opacity-50'}}"
                                        >
                                            <div class="flex items-center space-x-2">
                                                <div class="font-semibold text-sm">{{customField.label}}</div>
                                                <div
                                                    class="custom-field-custom-field-type-pill rounded-lg bg-gray-300 dark:bg-gray-700 text-black dark:text-gray-300 px-1.5 py-0.5 text-xs truncate font-mono"
                                                >
                                                    {{customField.type}}
                                                </div>
                                            </div>
                                            <div class="flex flex-row items-center space-x-2">
                                                <Button @type="default" @icon="pencil" @onClick={{fn this.editCustomField customField}} @permission="fleet-ops update custom-field" />
                                                <Button @type="danger" @icon="trash" @onClick={{fn this.deleteCustomField customField subject}} @permission="fleet-ops update custom-field" />
                                            </div>
                                        </div>
                                    {{/each}}
                                </div>
                            </ContentPanel>
                        {{else}}
                            <div class="min-h-24 p-4">
                                <div class="flex items-center justify-center border border-dashed border-gray-300 dark:border-gray-600 p-6 rounded-xl bg-gray-50 dark:bg-gray-800">
                                    <div class="text-center">
                                        <FaIcon @icon="layer-group" @size="2x" class="text-gray-400 mb-2" />
                                        <div class="text-sm text-gray-600 dark:text-gray-400 font-medium">
                                            No custom field groups
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">
                                            Add your first field group to start adding custom fields for
                                            {{pluralize subject.label}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {{/each}}
                    </div>
                </div>
            {{/each}}
        </TabNavigation>
    </div>
</div>