<Layout::Section::Header @title={{t "iam.common.group"}} @searchQuery={{this.query}} @onSearch={{perform this.search}}>
   {{#if (safe-has this.table "selectedRows")}}
        <DropdownButton @icon="layer-group" @text={{t "iam.common.bulk-action"}} @type="magic" @size="sm" @buttonWrapperClass="mr-2" @contentClass="dropdown-menu" as |dd|>
            <div class="next-dd-menu mt-2 mx-0">
                <div class="px-1">
                    <a href="#" class="text-red-500 next-dd-item" {{on "click" (dropdown-fn dd this.bulkDeleteGroups)}}>
                        {{t "iam.groups.index.delete-groups"}}
                    </a>
                </div>
            </div>
        </DropdownButton>
    {{/if}}
    <Button @icon="plus" @iconPrefix="fas" @type="primary" @text={{t "iam.common.new"}} class="mr-2" @onClick={{this.createGroup}} />
    <Button @icon="long-arrow-up" @iconClass="rotate-icon-45" @text={{t "iam.common.export"}} @onClick={{this.exportGroups}} />
</Layout::Section::Header>

<Layout::Section::Body>
    <Table @rows={{@model}} @columns={{this.columns}} @selectable={{true}} @canSelectAll={{true}} @onSetup={{fn (mut this.table)}} @pagination={{true}} @paginationMeta={{@model.meta}} @page={{this.page}} @onPageChange={{fn (mut this.page)}} @tfootVerticalOffset="53" @tfootVerticalOffsetElements=".next-view-section-subheader" />
</Layout::Section::Body>

{{outlet}}