@if (webNotifications) {
  <div>
    @for (group of notificationSettingGroups; track group) {
      @if (hasNotificationsInGroup(group)) {
        <div class="header notification-row">
          <div i18n>{{ group.label }}</div>
          <div i18n>Web</div>

          @if (emailEnabled) {
            <div i18n>Email</div>
          }
        </div>

        @for (notificationType of group.keys; track notificationType) {
          @if (hasUserRight(notificationType)) {
            <div class="small notification-row">
              <div>{{ labelNotifications[notificationType] }}</div>
              <div>
                <my-input-switch
                  [label]="getWebLabel(notificationType)"
                  [inputName]="'web-notification-' + notificationType"
                  [(ngModel)]="webNotifications[notificationType]"
                  (ngModelChange)="updateWebSetting(notificationType, webNotifications[notificationType])"
                ></my-input-switch>
              </div>

              @if (emailEnabled) {
                <div>
                  <my-input-switch
                    [label]="getEmailLabel(notificationType)"
                    [inputName]="'email-notification-' + notificationType"
                    [(ngModel)]="emailNotifications[notificationType]"
                    (ngModelChange)="updateEmailSetting(notificationType, emailNotifications[notificationType])"
                  ></my-input-switch>
                </div>
              }
            </div>
          }
        }
      }
    }
  </div>
}