<Layout::Resource::Tabular
    @registry="developers:api-key:table"
    @title={{t "developers.api-keys.index.title"}}
    @searchQuery={{this.query}}
    @onSearch={{perform this.search}}
    @searchDisabled={{cannot "developers list api-keys"}}
    @onReload={{this.reload}}
    @data={{@model}}
    @columns={{this.columns}}
    @page={{this.page}}
    @onPageChange={{fn (mut this.page)}}
    @setupTable={{fn (mut this.table)}}
    @actionButtons={{this.actionButtons}}
    @bulkActions={{this.bulkActions}}
    @controller={{this}}
>
    <:header>
        <div class="flex items-center mr-3">
            <Toggle
                @isToggled={{this.isTestMode}}
                @onToggle={{this.toggleTestMode}}
                @label={{t "developers.api-keys.index.label"}}
                @helpText={{t "developers.api-keys.index.help-text"}}
                class="mr-1"
            />
            {{#if this.isTestMode}}
                <span class="mx-2">
                    <select class="form-select form-input-sm" aria-label="Select API Key" {{on "change" this.toggleTestKey}}>
                        <option selected disabled>
                            {{t "developers.api-keys.index.select-key"}}
                        </option>
                        <option value="null" selected={{eq this.testKey null}}>
                            {{t "developers.api-keys.index.test-data"}}
                        </option>
                        {{#each (filter-by "isTestKey" @model) as |key|}}
                            <option value={{key.id}} selected={{eq this.testKey key.id}}>
                                {{or key.name key.key}}
                            </option>
                        {{/each}}
                    </select>
                </span>
            {{/if}}
        </div>
    </:header>
</Layout::Resource::Tabular>
