<fieldset class="c8y-fieldset m-t-0">
  <legend>{{ 'Developer mode' | translate }}</legend>

  <div class="d-flex a-i-center p-b-16">
    <label class="c8y-switch">
      <input
        type="checkbox"
        [ngModel]="devMode"
        (change)="toggleAdvancedMode()"
        [disabled]="!canChangeSettings"
      />
      <span></span>
      <span>{{ 'Advanced developer mode' | translate }}</span>
    </label>

    <button class="btn-help"
      [attr.aria-label]="'Help' | translate"
      [popover]="devMode ? disableAdvanced : enableAdvanced"
      container="body"
      placement="right"
      triggers="focus"
      type="button"
    ></button>

    <ng-template #enableAdvanced>
      <p class="text-16 text-bold p-b-8">
        <i [c8yIcon]="'imac-settings'"></i>
        {{ 'Advanced developer mode' | translate }}
      </p>
      <p class="p-b-8" translate>
        Create custom widgets by modifying a basic WebComponent with HTML and JavaScript. This
        <strong>unsupported</strong>
        feature is ideal for rapid prototyping and simple customizations.
      </p>
      <p class="p-b-8" translate>
        For production environments, we recommend our fully-supported Angular-based
        <a href="https://styleguide.cumulocity.com" target="_blank">Web SDK</a>.
        <br />
        Enable advanced developer mode to start coding!
      </p>
    </ng-template>

    <ng-template #disableAdvanced>
      <p class="text-16 text-bold p-b-8">
        {{ 'Advanced developer mode' | translate }}
      </p>
      <p class="p-b-8" translate>
        The advanced developer mode is enabled for this widget allowing to build extensive Web
        Components.
      </p>
      <p class="p-b-8" translate>
        You can disable this mode again, but it will reset the current code.
      </p>
    </ng-template>

    <ng-container *ngIf="!devMode">
      <label
        class="c8y-switch m-l-auto"
      >
        <input
          type="checkbox"
          (change)="changeOption('cssEncapsulation')"
          [disabled]="!canChangeSettings"
          [ngModel]="cssEncapsulation"
        />
        <span></span>
        <span>{{ 'CSS encapsulation' | translate }}</span>
      </label>
      <button
        class="btn-help m-0"
        [attr.aria-label]="'Help' | translate"
        popover="{{ CSS_ENCAPSULATION_HELP_CONTEXT | translate }}"
        triggers="focus"
        placement="left"
        container="body"
        type="button"
      ></button>
    </ng-container>

  </div>
</fieldset>