@if (form) {
  @let isWidgetContext = form.get('context')?.value === 'widget';
  @let helpText = 'Show controls directly in the widget view for easier access.' | translate;

  <form class="form-group m-b-8" [formGroup]="form">
    <div class="d-flex gap-8 a-i-center">
      <label class="c8y-radio">
        <input
          type="radio"
          value="dashboard"
          data-cy="c8y-config-context-selector--dashboard-mode"
          formControlName="context"
        />
        <span class="a-s-center"></span>
        <span translate>Dashboard</span>
      </label>
      <label class="c8y-radio">
        <input
          type="radio"
          value="widget"
          data-cy="c8y-config-context-selector--config-mode"
          formControlName="context"
        />
        <span class="a-s-center"></span>
        <span translate>Widget</span>
      </label>
    </div>

    @if (isWidgetContext) {
      <div class="m-t-8">
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            data-cy="c8y-config-context-selector--view-and-config-mode"
            formControlName="showInWidget"
          />
          <span class="a-s-center"></span>
          <span translate>Show in widget</span>
          <button
            class="btn-help btn-help--sm"
            [attr.aria-label]="'Help' | translate"
            [popover]="helpText"
            placement="right"
            triggers="focus"
            container="body"
            type="button"
            [adaptivePosition]="true"
          ></button>
        </label>
      </div>
    }
  </form>
}