<div
  class="d-flex d-col fit-h min-height-0"
  [formGroup]="form"
>
  <fieldset class="card-block bg-level-1 fit-w">
    <div class="content-flex-50 d-flex a-i-center">
      <label
        class="m-r-8 flex-no-shrink"
        for="textCfgEditorLanguage"
        translate
      >
        Language
      </label>
      <c8y-select
        aria-label="{{ 'Editor language' | translate }}"
        id="textCfgEditorLanguage"
        [items]="editorLanguages"
        formControlName="language"
      ></c8y-select>
      <div class="m-l-auto d-flex">
        @if (showTextBasedConfigReload) {
          <button
            class="btn btn-default btn-sm a-s-center m-t-8 m-b-8"
            title="{{ 'Get configuration from device' | translate }}"
            type="button"
            (click)="reloadConfiguration()"
            [disabled]="reloadingConfig() || savingConfig()"
          >
            @if (reloadingConfig()) {
              <i
                class="m-r-4"
                c8yIcon="refresh"
                [ngClass]="{ 'icon-spin': reloadingConfig() }"
              ></i>
            }
            @if (!reloadingConfig()) {
              <i
                class="m-r-4"
                c8yIcon="download"
              ></i>
            }

            {{ 'Get configuration from device' | translate }}
          </button>
        }
      </div>
    </div>
  </fieldset>
  <div class="p-relative flex-grow min-height-0">
    <c8y-editor
      class="p-absolute top-0 left-0 fit-w fit-h"
      formControlName="config"
      [editorOptions]="editorOptions()"
    ></c8y-editor>
  </div>
  @if (latestOperation() !== undefined) {
    <c8y-operation-details
      class="bg-level-2 p-0"
      [operation]="latestOperation()"
    ></c8y-operation-details>
  }
  @if (showTextBasedConfigSave) {
    <div class="card-footer flex-no-shrink fit-w separator">
      <button
        class="btn btn-primary"
        id="send-config-btn"
        type="button"
        (click)="updateConfiguration(configControl.value)"
        [disabled]="reloadingConfig() || savingConfig() || !configControl.value"
        [ngClass]="{ 'btn-pending': savingConfig() }"
      >
        @if (!savingConfig()) {
          <span title="{{ 'Send' | translate }}">
            {{ 'Send configuration to device' | translate }}
          </span>
        }
        @if (savingConfig()) {
          <span title="{{ 'Sending…' | translate }}">
            {{ 'Sending…' | translate }}
          </span>
        }
      </button>
    </div>
  }
</div>