<c8y-widget-config-feedback>
  <div class="d-flex">
    @if (config?.devMode && !config?.legacy) {
      <span
        class="tag tag--warning text-12"
        translate
      >
        Advanced developer mode
      </span>
    }
  </div>
  <div class="d-flex">
    @if (config?.legacy) {
      <span
        class="tag tag--warning text-12"
        [title]="
          'This widget is in legacy mode. Consider to upgrade this to a new HTML widget. Read our documentation on details to transform your widget'
            | translate
        "
        translate
      >
        Legacy mode
      </span>
    }
  </div>
</c8y-widget-config-feedback>

<div class="d-flex d-col fit-h fit-w">
  @if (showAdvancedSettings) {
    <c8y-html-widget-advanced-settings
      [devMode]="config?.devMode"
      [cssEncapsulation]="config?.options?.cssEncapsulation"
    ></c8y-html-widget-advanced-settings>
  }

  <fieldset class="c8y-fieldset p-0 overflow-hidden">
    <legend class="m-l-16 p-l-0">{{ 'Code' | translate }}</legend>

    <div class="btn-group btn-group-sm m-l-0 p-t-8 p-b-8 p-l-16 p-r-16 fit-w d-flex">
      <button
        class="btn btn-default"
        [attr.aria-label]="'Undo' | translate"
        [tooltip]="'Undo' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="undo()"
      >
        <i [c8yIcon]="'undo'"></i>
      </button>

      <button
        class="btn btn-default"
        [attr.aria-label]="'Redo' | translate"
        [tooltip]="'Redo' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="redo()"
      >
        <i [c8yIcon]="'redo'"></i>
      </button>

      <button
        class="btn btn-default"
        [attr.aria-label]="'Format code' | translate"
        [tooltip]="'Format code' | translate"
        placement="top"
        container="body"
        type="button"
        [delay]="500"
        (click)="formatCode()"
      >
        <i [c8yIcon]="'format-align-left'"></i>
      </button>

      @let propertyKeys = propertyKeys$ | async;
      @if (mode !== 'css' && propertyKeys?.length) {
        <div
          class="btn-group btn-group-sm m-l-4"
          container="body"
          dropdown
        >
          <button
            class="btn btn-default"
            [attr.aria-label]="'Insert property' | translate"
            [tooltip]="'Insert property' | translate"
            placement="top"
            container="body"
            type="button"
            [delay]="500"
            dropdownToggle
          >
            <i [c8yIcon]="'plus-circle'"></i>
          </button>
          <ul
            class="dropdown-menu"
            *dropdownMenu
          >
            @for (key of propertyKeys; track key) {
              <li>
                <button
                  class="dropdown-item"
                  type="button"
                  (click)="insertPropertyAtCursor(key)"
                >
                  {{ key }}
                </button>
              </li>
            }
          </ul>
        </div>
      }

      <label class="c8y-switch m-l-auto">
        <input
          type="checkbox"
          [checked]="isAutoSaveEnabled"
          (change)="isAutoSaveEnabled = !isAutoSaveEnabled"
        />
        <span></span>
        <span translate>Auto save</span>
      </label>
    </div>

    <div
      class="btn-toolbar m-0 p-relative"
      role="toolbar"
    >
      <c8y-tabs-outlet
        class="elevation-none"
        [outletName]="TAB_OUTLET_NAME"
        [orientation]="'horizontal'"
        [openFirstTab]="false"
      ></c8y-tabs-outlet>
      <c8y-tab
        [icon]="'code'"
        [label]="(config?.devMode ? TAB_WEBCOMPONENT_LABEL : TAB_HTML_LABEL) | translate"
        [priority]="100"
        [showAlways]="true"
        [tabsOutlet]="TAB_OUTLET_NAME"
        [isActive]="mode === 'code'"
        (onSelect)="switchMode('code')"
      ></c8y-tab>
      @if (!config?.devMode && !config?.legacy) {
        <c8y-tab
          [icon]="'c8y-css'"
          [label]="TAB_CSS_LABEL | translate"
          [priority]="0"
          [tabsOutlet]="TAB_OUTLET_NAME"
          [isActive]="mode === 'css'"
          (onSelect)="switchMode('css')"
        ></c8y-tab>
      }
    </div>

    @if (!isLoading) {
      @if (!(mode === 'css' && config?.devMode)) {
        <c8y-editor
          class="flex-grow d-block"
          style="height: 450px"
          [ngModel]="value"
          (ngModelChange)="changeCode($event)"
          [editorOptions]="{
            language,
            tabSize: 2,
            insertSpaces: true,
            minimap: { enabled: false }
          }"
          (editorInit)="editorLoaded($event)"
        ></c8y-editor>
      }
    } @else {
      <c8y-loading></c8y-loading>
    }
  </fieldset>
</div>