{{page-title (t "common.users")}}
<Overlay
    @onLoad={{this.setOverlayContext}}
    @onOpen={{this.onOpen}}
    @onClose={{this.onClose}}
    @onToggle={{this.onToggle}}
    @position="right"
    @noBackdrop={{true}}
    @fullHeight={{true}}
    @isResizeble={{true}}
    @width="800px"
>
    <Overlay::Header @title={{concat this.company.name " - " (t "common.users")}} @hideStatusDot={{true}} @titleWrapperClass="leading-5">
        <div class="flex flex-1 justify-end">
            <Button @type="default" @icon="times" @helpText={{t "common.close-and-save"}} @onClick={{this.onPressClose}} />
        </div>
    </Overlay::Header>

    <Overlay::Body class="without-padding">
        {{! template-lint-disable no-unbound }}
        <Layout::Section::Header @title={{t "console.admin.organizations.users.title"}} @searchQuery={{unbound this.nestedQuery}} @onSearch={{this.search}}>
            {{#if (gt @model.meta.total this.nestedLimit)}}
                <Pagination
                    @meta={{@model.meta}}
                    @page={{this.nestedPage}}
                    @onPageChange={{fn (mut this.nestedPage)}}
                    @metaInfoClass="hidden"
                    @metaInfoWrapperClass="within-layout-section-header"
                />
            {{/if}}
        </Layout::Section::Header>

        <Layout::Section::Body>
            <Table @rows={{@model}} @columns={{this.columns}} @selectable={{false}} @canSelectAll={{false}} @onSetup={{fn (mut this.table)}} />
        </Layout::Section::Body>
    </Overlay::Body>
</Overlay>