@if (toggleState$ | async; as toggleState) {
  <div class="feature-row">
    <span>{{ 'SETTING.FEATURES.' + (toggleStateKey | uppercase) | translate }}</span>
    <div class="row">
      <mat-button-toggle-group
        class="theme-toggle"
        class="buttongroup"
        [(ngModel)]="toggleState.enabled"
        (change)="toggleChange.emit(toggleState)"
        name="displayview"
      >
        <mat-button-toggle [value]="false">
          <div class="toggle-row">
            <span>{{ 'SETTING.FEATURES.STATES.DISABLED' | translate }}</span>
            @if (!toggleState.enabled && (isInherited$ | async)) {
              <div
                class="current-dot"
                matTooltip="{{ 'SETTING.FEATURES.INHERITEDINDICATOR_DESCRIPTION.DISABLED' | translate }}"
              ></div>
            }
          </div>
        </mat-button-toggle>
        <mat-button-toggle [value]="true">
          <div class="toggle-row">
            <span>{{ 'SETTING.FEATURES.STATES.ENABLED' | translate }}</span>
            @if (toggleState.enabled && (isInherited$ | async)) {
              <div
                class="current-dot"
                matTooltip="{{ 'SETTING.FEATURES.INHERITEDINDICATOR_DESCRIPTION.ENABLED' | translate }}"
              ></div>
            }
          </div>
        </mat-button-toggle>
      </mat-button-toggle-group>
    </div>
    <ng-content></ng-content>
    @if ('SETTING.FEATURES.' + (toggleStateKey | uppercase) + '_DESCRIPTION' | translate; as i18nDescription) {
      <cnsl-info-section class="feature-info">{{ i18nDescription }}</cnsl-info-section>
    }
  </div>
}