<!--

    Copyright © 2016-2026 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<mat-toolbar color="primary">
  <h2>{{ dialogTitle | translate }}</h2>
  <span class="flex-1"></span>
  <div tb-help="ruleNotifications"></div>
  <button mat-icon-button
          (click)="cancel()"
          type="button">
    <mat-icon class="material-icons">close</mat-icon>
  </button>
</mat-toolbar>
@if (isLoading$ | async) {
  <mat-progress-bar color="warn" mode="indeterminate"></mat-progress-bar>
} @else {
  <div style="height: 4px;"></div>
}
<div mat-dialog-content class="xs:p-0">
  <mat-horizontal-stepper [linear]="true" labelPosition="end" #addNotificationRule [orientation]="(stepperOrientation | async)"
                          (selectionChange)="changeStep($event)">
    <ng-template matStepperIcon="edit">
      <mat-icon>check</mat-icon>
    </ng-template>
    <mat-step [stepControl]="ruleNotificationForm">
      <ng-template matStepLabel>{{ 'notification.basic-settings' | translate }}</ng-template>
      <form [formGroup]="ruleNotificationForm">
        <mat-form-field class="mat-block" appearance="outline">
          <mat-label translate>notification.rule-name</mat-label>
          <input matInput formControlName="name" required>
          @if (ruleNotificationForm.get('name').hasError('required')) {
            <mat-error>{{ 'notification.rule-name-required' | translate }}</mat-error>
          }
        </mat-form-field>
        <mat-slide-toggle formControlName="enabled" style="margin-bottom: 22px;">
          {{ 'notification.rule-enable' | translate }}
        </mat-slide-toggle>
        <mat-form-field class="mat-block" appearance="outline">
          <mat-label translate>notification.trigger.trigger</mat-label>
          <mat-select formControlName="triggerType" required>
            @for (trigger of triggerTypes; track trigger) {
              <mat-option [value]="trigger">
                {{ triggerTypeTranslationMap.get(trigger) | translate }}
              </mat-option>
            }
          </mat-select>
          @if (ruleNotificationForm.get('triggerType').hasError('required')) {
            <mat-error>{{ 'notification.trigger.trigger-required' | translate }}</mat-error>
          }
        </mat-form-field>
        <tb-template-autocomplete
          required allowCreate allowEdit
          appearance="outline"
          formControlName="templateId"
          [notificationTypes]="ruleNotificationForm.get('triggerType').value">
        </tb-template-autocomplete>
        @if (ruleNotificationForm.get('triggerType').value !== triggerType.ALARM) {
          <section formGroupName="recipientsConfig">
            <tb-entity-list
              required
              appearance="outline"
              formControlName="targets"
              subType="{{ ruleNotificationForm.get('triggerType').value }}"
              [entityType]="entityType.NOTIFICATION_TARGET"
              labelText="{{ 'notification.recipients' | translate }}"
              requiredText="{{ 'notification.recipients-required' | translate }}"
              placeholderText="{{ 'notification.recipient' | translate }}">
              <button #createTargetButton
                      mat-button color="primary" matSuffix
                      (click)="createTarget($event, createTargetButton)">
                <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
              </button>
            </tb-entity-list>
          </section>
        } @else {
          <fieldset class="fields-group tb-hierarchy" formGroupName="recipientsConfig">
            <legend translate>notification.escalation-chain</legend>
            <div class="mat-body-2" translate>notification.recipients</div>
            <tb-escalations-component formControlName="escalationTable"></tb-escalations-component>
            <ng-container *ngTemplateOutlet="clearRules"></ng-container>
          </fieldset>
        }
      </form>
      <ng-template #clearRules>
        <form [formGroup]="alarmTemplateForm">
          <section formGroupName="triggerConfig">
            <section formGroupName="clearRule">
              <div class="mat-body-2" translate>notification.stop-escalation-alarm-status-become</div>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always" style="margin-right: 48px">
                <mat-label translate>alarm.alarm-status-list</mat-label>
                <mat-select formControlName="alarmStatuses" multiple
                            placeholder="{{ !alarmTemplateForm.get('triggerConfig.clearRule.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
                  @for (searchStatus of alarmSearchStatuses; track searchStatus) {
                    <mat-option [value]="searchStatus">
                      {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </section>
          </section>
        </form>
      </ng-template>
    </mat-step>
    @if (ruleNotificationForm.get('triggerType').value === triggerType.ALARM) {
      <mat-step [stepControl]="alarmTemplateForm">
        <ng-template matStepLabel>{{ 'notification.alarm-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="alarmTemplateForm">
          <section formGroupName="triggerConfig">
            <fieldset class="fields-group tb-margin-before-field">
              <legend translate>notification.filter</legend>
              <tb-string-items-list
                editable
                appearance="outline"
                label="{{ 'alarm.alarm-type-list' | translate }}"
                placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmTypes').value?.length ? ('alarm.any-type' | translate) : '' }}"
                floatLabel="always"
                formControlName="alarmTypes">
              </tb-string-items-list>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>alarm.alarm-severity-list</mat-label>
                <mat-select formControlName="alarmSeverities" multiple
                            placeholder="{{ !alarmTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
                  @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
                    <mat-option [value]="alarmSeverity">
                      {{ alarmSeverityTranslationMap.get(alarmSeverity) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </fieldset>
            <mat-form-field class="mat-block flex-1" appearance="outline">
              <mat-label translate>notification.notify-on</mat-label>
              <mat-select formControlName="notifyOn" multiple>
                @for (alarmAction of alarmActions; track alarmAction) {
                  <mat-option [value]="alarmAction">
                    {{ alarmActionTranslationMap.get(alarmAction) | translate }}
                  </mat-option>
                }
              </mat-select>
              @if (alarmTemplateForm.get('triggerConfig.notifyOn').hasError('required')) {
                <mat-error>{{ 'notification.notify-on-required' | translate }}</mat-error>
              }
            </mat-form-field>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.DEVICE_ACTIVITY) {
      <mat-step [stepControl]="deviceInactivityTemplateForm">
        <ng-template matStepLabel>{{ 'notification.device-activity-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="deviceInactivityTemplateForm">
          <section formGroupName="triggerConfig">
            <div class="mb-4 flex justify-center">
              <tb-toggle-select class="w-60" appearance="fill" formControlName="filterByDevice">
                <tb-toggle-option [value]=true>{{ 'device.device' | translate }}</tb-toggle-option>
                <tb-toggle-option [value]=false>{{ 'device-profile.device-profile' | translate }}</tb-toggle-option>
              </tb-toggle-select>
            </div>
            @if (deviceInactivityTemplateForm.get('triggerConfig.filterByDevice').value) {
              <tb-entity-list
                formControlName="devices"
                appearance="outline"
                subscriptSizing="dynamic"
                labelText="{{ 'device.devices' | translate }}"
                placeholderText="{{ 'device.devices' | translate }}"
                hint="{{ 'notification.device-list-rule-hint' | translate }}"
                [entityType]="entityType.DEVICE">
              </tb-entity-list>
            } @else {
              <tb-entity-list
                formControlName="deviceProfiles"
                appearance="outline"
                subscriptSizing="dynamic"
                labelText="{{ 'device-profile.device-profiles' | translate }}"
                placeholderText="{{ 'device-profile.device-profiles' | translate }}"
                hint="{{ 'notification.device-profiles-list-rule-hint' | translate }}"
                [entityType]="entityType.DEVICE_PROFILE">
              </tb-entity-list>
            }
            <mat-form-field class="mat-block flex-1" appearance="outline">
              <mat-label translate>notification.notify-on</mat-label>
              <mat-select formControlName="notifyOn" multiple>
                @for (deviceEvent of deviceEvents; track deviceEvent) {
                  <mat-option [value]="deviceEvent">
                    {{ deviceEventTranslationMap.get(deviceEvent) | translate }}
                  </mat-option>
                }
              </mat-select>
              @if (deviceInactivityTemplateForm.get('triggerConfig.notifyOn').hasError('required')) {
                <mat-error>{{ 'notification.notify-on-required' | translate }}</mat-error>
              }
            </mat-form-field>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.ENTITY_ACTION) {
      <mat-step [stepControl]="entityActionTemplateForm">
        <ng-template matStepLabel>{{ 'notification.entity-action-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="entityActionTemplateForm">
          <fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
            <legend translate>notification.filter</legend>
            <tb-entity-type-list required
                                 ignoreAuthorityFilter
                                 appearance="outline"
                                 [allowedEntityTypes]="allowEntityTypeForEntityAction"
                                 formControlName="entityTypes">
            </tb-entity-type-list>
            <section class="flex flex-col gap-2">
              <span class="flex-1" translate>notification.status</span>
              <mat-slide-toggle formControlName="created">{{ 'notification.created' | translate }}</mat-slide-toggle>
              <mat-slide-toggle formControlName="updated">{{ 'notification.updated' | translate }}</mat-slide-toggle>
              <mat-slide-toggle formControlName="deleted">{{ 'notification.deleted' | translate }}</mat-slide-toggle>
            </section>
          </fieldset>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.ALARM_COMMENT) {
      <mat-step [stepControl]="alarmCommentTemplateForm">
        <ng-template matStepLabel>{{ 'notification.alarm-comment-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="alarmCommentTemplateForm">
          <section formGroupName="triggerConfig">
            <fieldset class="fields-group tb-margin">
              <legend translate>notification.filter</legend>
              <tb-string-items-list
                editable
                appearance="outline"
                label="{{ 'alarm.alarm-type-list' | translate }}"
                placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmTypes').value?.length ? ('alarm.any-type' | translate) : '' }}"
                floatLabel="always"
                formControlName="alarmTypes">
              </tb-string-items-list>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>alarm.alarm-severity-list</mat-label>
                <mat-select formControlName="alarmSeverities" multiple
                            placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
                  @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
                    <mat-option [value]="alarmSeverity">
                      {{ alarmSeverityTranslationMap.get(alarmSeverity) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>alarm.alarm-status-list</mat-label>
                <mat-select formControlName="alarmStatuses" multiple
                            placeholder="{{ !alarmCommentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
                  @for (searchStatus of alarmSearchStatuses; track searchStatus) {
                    <mat-option [value]="searchStatus">
                      {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </fieldset>
            <section class="flex flex-col">
              <mat-slide-toggle formControlName="onlyUserComments" style="margin-bottom: 12px;">
                {{ 'notification.notify-only-user-comments' | translate }}
              </mat-slide-toggle>
              <mat-slide-toggle formControlName="notifyOnCommentUpdate" style="margin-bottom: 12px;">
                {{ 'notification.notify-on-comment-update' | translate }}
              </mat-slide-toggle>
            </section>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.ALARM_ASSIGNMENT) {
      <mat-step [stepControl]="alarmAssignmentTemplateForm">
        <ng-template matStepLabel>{{ 'notification.alarm-assignment-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="alarmAssignmentTemplateForm">
          <section formGroupName="triggerConfig">
            <fieldset class="fields-group tb-margin">
              <legend translate>notification.filter</legend>
              <tb-string-items-list
                editable
                appearance="outline"
                label="{{ 'alarm.alarm-type-list' | translate }}"
                placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmTypes').value?.length ? ('alarm.any-type' | translate) : '' }}"
                floatLabel="always"
                formControlName="alarmTypes">
              </tb-string-items-list>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>alarm.alarm-severity-list</mat-label>
                <mat-select formControlName="alarmSeverities" multiple
                            placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmSeverities').value?.length ? ('alarm.any-severity' | translate) : '' }}">
                  @for (alarmSeverity of alarmSeverities; track alarmSeverity) {
                    <mat-option [value]="alarmSeverity">
                      {{ alarmSeverityTranslationMap.get(alarmSeverity) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>alarm.alarm-status-list</mat-label>
                <mat-select formControlName="alarmStatuses" multiple
                            placeholder="{{ !alarmAssignmentTemplateForm.get('triggerConfig.alarmStatuses').value?.length ? ('alarm.any-status' | translate) : '' }}">
                  @for (searchStatus of alarmSearchStatuses; track searchStatus) {
                    <mat-option [value]="searchStatus">
                      {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </fieldset>
            <mat-form-field class="mat-block flex-1" appearance="outline">
              <mat-label translate>notification.notify-on</mat-label>
              <mat-select formControlName="notifyOn" multiple>
                @for (alarmAssignmentAction of alarmAssignmentActions; track alarmAssignmentAction) {
                  <mat-option [value]="alarmAssignmentAction">
                    {{ alarmAssignmentActionTranslationMap.get(alarmAssignmentAction) | translate }}
                  </mat-option>
                }
              </mat-select>
              @if (alarmAssignmentTemplateForm.get('triggerConfig.notifyOn').hasError('required')) {
                <mat-error>{{ 'notification.notify-on-required' | translate }}</mat-error>
              }
            </mat-form-field>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.RULE_ENGINE_COMPONENT_LIFECYCLE_EVENT) {
      <mat-step [stepControl]="ruleEngineEventsTemplateForm">
        <ng-template matStepLabel>{{ 'notification.rule-engine-events-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="ruleEngineEventsTemplateForm">
          <section formGroupName="triggerConfig">
            <fieldset class="fields-group tb-margin">
              <legend translate>notification.rule-engine-filter</legend>
              <tb-entity-list
                formControlName="ruleChains"
                appearance="outline"
                subscriptSizing="dynamic"
                labelText="{{ 'rulechain.rulechains' | translate }}"
                placeholderText="{{ 'rulechain.rulechains' | translate }}"
                hint="{{ 'notification.rule-chain-list-rule-hint' | translate }}"
                [entityType]="entityType.RULE_CHAIN">
              </tb-entity-list>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>rulechain.rulechain-events</mat-label>
                <mat-select formControlName="ruleChainEvents" multiple
                            placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleChainEvents').value?.length ? ('event.all-events' | translate) : '' }}">
                  @for (componentLifecycleEvent of componentLifecycleEvents; track componentLifecycleEvent) {
                    <mat-option [value]="componentLifecycleEvent">
                      {{ componentLifecycleEventTranslationMap.get(componentLifecycleEvent) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <mat-slide-toggle formControlName="onlyRuleChainLifecycleFailures">
                {{ 'notification.only-rule-chain-lifecycle-failures' | translate }}
              </mat-slide-toggle>
            </fieldset>
            <fieldset class="fields-group tb-margin">
              <legend translate>notification.rule-node-filter</legend>
              <mat-slide-toggle formControlName="trackRuleNodeEvents">
                {{ 'notification.track-rule-node-events' | translate }}
              </mat-slide-toggle>
              @if (ruleEngineEventsTemplateForm.get('triggerConfig.trackRuleNodeEvents').value) {
                <section>
                  <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                    <mat-label translate>rulenode.rule-node-events</mat-label>
                    <mat-select formControlName="ruleNodeEvents" multiple
                                placeholder="{{ !ruleEngineEventsTemplateForm.get('triggerConfig.ruleNodeEvents').value?.length ? ('event.all-events' | translate) : '' }}">
                      @for (componentLifecycleEvent of componentLifecycleEvents; track componentLifecycleEvent) {
                        <mat-option [value]="componentLifecycleEvent">
                          {{ componentLifecycleEventTranslationMap.get(componentLifecycleEvent) | translate }}
                        </mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                  <mat-slide-toggle formControlName="onlyRuleNodeLifecycleFailures">
                    {{ 'notification.only-rule-node-lifecycle-failures' | translate }}
                  </mat-slide-toggle>
                </section>
              }
            </fieldset>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.EDGE_CONNECTION) {
      <mat-step [stepControl]="edgeConnectionTemplateForm">
        <ng-template matStepLabel>{{ 'notification.edge-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="edgeConnectionTemplateForm">
          <section formGroupName="triggerConfig">
            <fieldset class="fields-group tb-margin-before-field">
              <legend translate>notification.filter</legend>
              <tb-entity-list
                formControlName="edges"
                appearance="outline"
                subscriptSizing="dynamic"
                labelText="{{'edge.edge-instances' | translate}}"
                placeholderText="{{ 'edge.edge-instances' | translate }}"
                hint="{{ 'notification.edge-list-rule-hint' | translate }}"
                [entityType]="entityType.EDGE">
              </tb-entity-list>
              <mat-form-field class="mat-block flex-1" appearance="outline" floatLabel="always">
                <mat-label translate>notification.notify-on</mat-label>
                <mat-select formControlName="notifyOn" multiple
                            placeholder="{{ !edgeConnectionTemplateForm.get('triggerConfig.notifyOn').value?.length ? ('event.all-events' | translate) : '' }}">
                  @for (edgeEvent of edgeConnectionEvents; track edgeEvent) {
                    <mat-option [value]="edgeEvent">
                      {{ edgeConnectionEventTranslationMap.get(edgeEvent) | translate }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
            </fieldset>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.EDGE_COMMUNICATION_FAILURE) {
      <mat-step [stepControl]="edgeCommunicationFailureTemplateForm">
        <ng-template matStepLabel>{{ 'notification.edge-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="edgeCommunicationFailureTemplateForm">
          <section formGroupName="triggerConfig">
            <fieldset class="fields-group tb-margin-before-field">
              <legend translate>notification.filter</legend>
              <tb-entity-list
                labelText="{{'edge.edge-instances' | translate}}"
                hint="{{ 'notification.edge-list-rule-hint' | translate }}"
                appearance="outline"
                [entityType]="entityType.EDGE"
                formControlName="edges">
              </tb-entity-list>
            </fieldset>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.ENTITIES_LIMIT) {
      <mat-step [stepControl]="entitiesLimitTemplateForm">
        <ng-template matStepLabel>{{ 'notification.entities-limit-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="entitiesLimitTemplateForm">
          <fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
            <legend translate>notification.filter</legend>
            <tb-entity-type-list formControlName="entityTypes"
                                 ignoreAuthorityFilter
                                 [allowedEntityTypes]="allowEntityTypeForEntitiesLimit">
            </tb-entity-type-list>
            <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
              <span translate>notification.threshold</span>
              <div class="flex flex-1 flex-row items-center justify-start">
                <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                  <input matSliderThumb formControlName="threshold" [value]="entitiesLimitTemplateForm.get('triggerConfig.threshold').value">
                </mat-slider>
                <mat-form-field class="limit-slider-value" appearance="outline" subscriptSizing="dynamic">
                  <input matInput formControlName="threshold" type="number" step="1"
                         [value]="entitiesLimitTemplateForm.get('triggerConfig.threshold').value"
                         min="0" max="100"/>
                  <span class="mr-2" matSuffix>%</span>
                </mat-form-field>
              </div>
            </div>
          </fieldset>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.API_USAGE_LIMIT) {
      <mat-step [stepControl]="apiUsageLimitTemplateForm">
        <ng-template matStepLabel>{{ 'notification.api-usage-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="apiUsageLimitTemplateForm">
          <section formGroupName="triggerConfig">
            <mat-form-field class="mat-block flex-1" appearance="outline" subscriptSizing="dynamic">
              <mat-label translate>api-usage.api-features</mat-label>
              <mat-select formControlName="apiFeatures" multiple>
                @for (apiFeature of apiFeatures; track apiFeature) {
                  <mat-option [value]="apiFeature">
                    {{ apiFeatureTranslationMap.get(apiFeature) | translate }}
                  </mat-option>
                }
              </mat-select>
              <mat-hint>{{ 'notification.api-feature-hint' | translate }}</mat-hint>
            </mat-form-field>
            <mat-form-field class="mat-block flex-1" appearance="outline">
              <mat-label translate>notification.notify-on</mat-label>
              <mat-select formControlName="notifyOn" multiple>
                @for (apiUsageStateValue of apiUsageStateValues; track apiUsageStateValue) {
                  <mat-option [value]="apiUsageStateValue">
                    {{ apiUsageStateValueTranslationMap.get(apiUsageStateValue) | translate }}
                  </mat-option>
                }
              </mat-select>
              @if (apiUsageLimitTemplateForm.get('triggerConfig.notifyOn').hasError('required')) {
                <mat-error>{{ 'notification.notify-on-required' | translate }}</mat-error>
              }
            </mat-form-field>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.NEW_PLATFORM_VERSION) {
      <mat-step [stepControl]="newPlatformVersionTemplateForm">
        <ng-template matStepLabel>{{ 'notification.new-platform-version-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.RATE_LIMITS) {
      <mat-step [stepControl]="rateLimitsTemplateForm">
        <ng-template matStepLabel>{{ 'notification.rate-limits-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="rateLimitsTemplateForm">
          <section formGroupName="triggerConfig">
            <tb-string-items-list
              appearance="outline"
              label="{{ 'notification.rate-limits' | translate }}"
              hint="{{ 'notification.api-feature-hint' | translate }}"
              [predefinedValues]="limitedApis"
              formControlName="apis">
            </tb-string-items-list>
          </section>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.TASK_PROCESSING_FAILURE) {
      <mat-step [stepControl]="taskProcessingFailureTemplateForm">
        <ng-template matStepLabel>{{ 'notification.task-processing-failure-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

    @if (ruleNotificationForm.get('triggerType').value === triggerType.RESOURCES_SHORTAGE) {
      <mat-step [stepControl]="resourceUsageShortageTemplateForm">
        <ng-template matStepLabel>{{ 'notification.resources-shortage-trigger-settings' | translate }}</ng-template>
        <form [formGroup]="resourceUsageShortageTemplateForm">
          <fieldset class="fields-group tb-margin" formGroupName="triggerConfig">
            <legend translate>notification.filter</legend>
            <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
              <span translate>notification.cpu-threshold</span>
              <div class="flex flex-1 flex-row items-center justify-start">
                <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                  <input matSliderThumb formControlName="cpuThreshold" [value]="resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').value">
                </mat-slider>
                <mat-form-field class="limit-slider-value" appearance="outline" subscriptSizing="dynamic">
                  <input matInput formControlName="cpuThreshold" type="number" step="1"
                         [value]="resourceUsageShortageTemplateForm.get('triggerConfig.cpuThreshold').value"
                         min="0" max="100"/>
                  <span class="mr-2" matSuffix>%</span>
                </mat-form-field>
              </div>
            </div>
            <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
              <span translate>notification.ram-threshold</span>
              <div class="flex flex-1 flex-row items-center justify-start">
                <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                  <input matSliderThumb formControlName="ramThreshold" [value]="resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').value">
                </mat-slider>
                <mat-form-field class="limit-slider-value" appearance="outline" subscriptSizing="dynamic">
                  <input matInput formControlName="ramThreshold" type="number" step="1"
                         [value]="resourceUsageShortageTemplateForm.get('triggerConfig.ramThreshold').value"
                         min="0" max="100"/>
                  <span class="mr-2" matSuffix>%</span>
                </mat-form-field>
              </div>
            </div>
            <div class="limit-slider-container mb-4 flex flex-row items-center justify-start xs:flex-col xs:items-stretch">
              <span translate>notification.storage-threshold</span>
              <div class="flex flex-1 flex-row items-center justify-start">
                <mat-slider class="flex-1" min="0" max="100" step="1" discrete [displayWith]="formatLabel">
                  <input matSliderThumb formControlName="storageThreshold" [value]="resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').value">
                </mat-slider>
                <mat-form-field class="limit-slider-value" appearance="outline" subscriptSizing="dynamic">
                  <input matInput formControlName="storageThreshold" type="number" step="1"
                         [value]="resourceUsageShortageTemplateForm.get('triggerConfig.storageThreshold').value"
                         min="0" max="100"/>
                  <span class="mr-2" matSuffix>%</span>
                </mat-form-field>
              </div>
            </div>
          </fieldset>
        </form>
        <form [formGroup]="ruleNotificationForm">
          <section formGroupName="additionalConfig">
            <mat-form-field class="mat-block" appearance="outline">
              <mat-label translate>notification.description</mat-label>
              <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1"></textarea>
            </mat-form-field>
          </section>
        </form>
      </mat-step>
    }

  </mat-horizontal-stepper>
</div>
<mat-divider></mat-divider>
<div mat-dialog-actions class="flex flex-row">
  @if (selectedIndex > 0) {
    <button mat-stroked-button (click)="backStep()">{{ 'action.back' | translate }}</button>
  }
  <span class="flex-1"></span>
  <button mat-raised-button
          color="primary"
          (click)="nextStep()">{{ nextStepLabel() | translate }}</button>
</div>
