Fleetbase-Mirror-Repo/console/app/templates/console/admin/notifications.hbs

{{page-title "Push Notifications"}}
<Layout::Section::Header @title={{t "console.admin.notifications.title"}}>
     <Button @type="primary" @size="sm" @icon="save" @text={{t "common.save-button-text"}} @onClick={{this.saveSettings}} @disabled={{this.isLoading}} @isLoading={{this.isLoading}} />
</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-4">
            {{#each-in this.groupedNotifications as |groupName notifications|}}
                <ContentPanel @title={{concat (smart-humanize groupName) " " (t "console.admin.notifications.notification-settings") }} @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
                    {{#each notifications 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>
            {{/each-in}}
        </div>
    </div>
    <Spacer @height="300px" />
</Layout::Section::Body>