<Layout::Section::Header @title={{t "fleet-ops.settings.notifications.fleet-ops-notification-settings"}}>
    <Button
        @type="primary"
        @size="sm"
        @icon="save"
        @text={{t "common.save-button-text"}}
        @onClick={{perform this.saveSettings}}
        @disabled={{this.saveSettings.isRunning}}
        @isLoading={{or this.saveSettings.isRunning this.getSettings.isRunning}}
    />
</Layout::Section::Header>

<Layout::Section::Body class="overflow-y-scroll h-full">
    <div class="container mx-auto h-screen">
        <div class="max-w-3xl my-10 mx-auto space-y-6">
            <ContentPanel @title={{t "fleet-ops.settings.notifications.configure-notifications"}} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                {{#each this.registry as |notification|}}
                    <InputGroup @name={{titleize notification.name}} @helpText={{notification.description}}>
                        <div class="fleetbase-model-select fleetbase-power-select ember-model-select">
                            <PowerSelectMultiple
                                @searchEnabled={{true}}
                                @options={{this.notifiables}}
                                @selected={{get this.notificationSettings (concat (get-notification-key notification.definition notification.name) ".notifiables")}}
                                @onChange={{fn this.onSelectNotifiable notification}}
                                @placeholder="Select notifiables..."
                                @triggerClass="form-select form-input form-input-sm flex-1"
                                as |notifiable|
                            >
                                {{notifiable.label}}
                            </PowerSelectMultiple>
                        </div>
                    </InputGroup>
                {{/each}}
            </ContentPanel>
        </div>
    </div>
    <Spacer @height="600px" />
</Layout::Section::Body>