<form (submit)="save()" [formGroup]="form">
    <div class="dialog-content">
        <div *ngFor="let category of notificationCategories">
            <div class="iqser-input-group header w-full">
                <mat-slide-toggle color="primary" formControlName="{{ category }}Enabled">{{
                    translations[category] | translate
                }}</mat-slide-toggle>
            </div>

            <div *ngIf="isCategoryActive(category)" class="options-content">
                <div [translate]="'notifications-screen.options-title'" class="statement"></div>

                <div *ngFor="let key of notificationGroupsKeys; let i = index" class="group">
                    <div [translate]="translations[key]" class="group-title"></div>
                    <div class="iqser-input-group">
                        <ng-container *ngFor="let preference of getRssFilteredSettings(notificationGroupsValues[i])">
                            <mat-checkbox
                                *ngIf="!skipPreference(preference)"
                                (change)="addRemovePreference($event.checked, category, preference)"
                                [checked]="isPreferenceChecked(category, preference)"
                                color="primary"
                            >
                                {{ translations[preference] | translate }}
                            </mat-checkbox>
                        </ng-container>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            [disabled]="form.invalid || !changed"
            [label]="'user-profile-screen.actions.save' | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
        ></iqser-icon-button>
    </div>
</form>
