<div class="card-header j-c-center separator flex-no-shrink p-24">
  <i
    class="m-r-8"
    [c8yIcon]="'cogs'"
    aria-hidden="true"
  ></i>
  <h4 id="drawerTitle">
    @if (mo?.id) {
      {{ 'Update configuration' | translate }}
    } @else {
      {{ 'Add configuration' | translate }}
    }
  </h4>
</div>

<form
  class="d-contents"
  [formGroup]="form"
  (ngSubmit)="save()"
>
  <div
    class="card-body inner-scroll p-24"
    [class.d-col]="form.value.uploadChoice === 'editInline'"
  >
    <div class="row">
      <c8y-form-group class="col-sm-3">
        <label
          for="confVersion"
          translate
        >
          Name
        </label>
        <input
          class="form-control"
          id="confVersion"
          placeholder="{{ 'e.g.' | translate }} hosts"
          aria-required="true"
          type="text"
          autocomplete="off"
          formControlName="version"
        />
      </c8y-form-group>

      <c8y-form-group class="col-sm-3">
        <label
          for="confDeviceType"
          translate
        >
          Device type
        </label>
        <input
          class="form-control"
          id="confDeviceType"
          placeholder="{{ 'e.g.' | translate }} c8y_Linux"
          type="text"
          autocomplete="off"
          formControlName="deviceType"
        />
      </c8y-form-group>

      <c8y-form-group class="col-sm-3">
        <label
          for="confDescription"
          translate
        >
          Description
        </label>
        <input
          class="form-control"
          id="confDescription"
          placeholder="{{ 'e.g.' | translate }} Host configuration"
          type="text"
          autocomplete="off"
          formControlName="description"
        />
      </c8y-form-group>

      <c8y-form-group class="col-sm-3">
        <label translate>Configuration type</label>
        <c8y-typeahead
          placeholder="{{ 'e.g.' | translate }} ssh"
          name="confType"
          data-cy="conf-detail--configuration-type"
          [ngModel]="configurationTypeMO"
          [ngModelOptions]="{ standalone: true }"
          (ngModelChange)="configurationTypeMO = $event"
          maxlength="254"
          (onSearch)="setPipe($event)"
          displayProperty="configurationType"
        >
          @let patternStr = pattern();
          <c8y-li
            class="p-l-8 p-r-8 c8y-list__item--link"
            *c8yFor="let config of configs; pipe: filterPipe; notFound: notFoundTemplate"
            (click)="configurationTypeMO = config; setPipe('')"
            [active]="configurationTypeMO === config"
          >
            <c8y-highlight
              [text]="config.configurationType || '--'"
              [pattern]="patternStr"
            ></c8y-highlight>
          </c8y-li>
          <ng-template #notFoundTemplate>
            @if (patternStr.length > 0) {
              <c8y-li class="bg-level-2 p-8">
                <span translate>No match found.</span>
                <button
                  class="btn btn-primary btn-xs m-l-8"
                  title="{{ 'Add new`configuration type`' | translate }}"
                  type="button"
                  translate
                >
                  Add new`configuration type`
                </button>
              </c8y-li>
            }
          </ng-template>
        </c8y-typeahead>
      </c8y-form-group>
    </div>

    <fieldset
      class="d-col"
      [class.flex-grow]="form.value.uploadChoice === 'editInline'"
      [class.min-height-0]="form.value.uploadChoice === 'editInline'"
    >
      <legend
        class="legend form-block m-t-40"
        translate
      >
        Configuration file
      </legend>

      @if (isExternalUrl()) {
        <p
          class="text-muted m-b-8"
          translate
        >
          Content is sourced from a remote URL and cannot be edited inline.
        </p>
        <c8y-form-group>
          <label
            for="confFileUrl"
            translate
          >
            File URL
          </label>
          <input
            class="form-control"
            id="confFileUrl"
            placeholder="https://..."
            type="url"
            autocomplete="off"
            [ngModel]="binary.url"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="binary = { url: $event }; form.markAsDirty()"
          />
        </c8y-form-group>
      } @else {
        <c8y-file-picker
          [maxAllowedFiles]="1"
          [allowedUploadChoices]="['uploadBinary', 'uploadUrl', 'editInline']"
          [uploadChoice]="form.controls.uploadChoice.value"
          (uploadChoiceChange)="onUploadChoiceChange($event)"
          [fileUrl]="binary.url"
          (fileUrlChange)="onFileUrlChange($event)"
          [fileBinary]="binary.file"
          (fileBinaryChange)="onFileBinaryChange($event)"
          (textFilePicked)="onTextFilePicked($event)"
          [fileUrlPopover]="textForConfigurationUrlPopover"
        >
          <ng-container c8yInlineEditor>
            <div class="row">
              <c8y-form-group class="col-sm-9">
                <label
                  for="confEditorFilename"
                  translate
                >
                  Filename
                </label>
                <input
                  class="form-control"
                  id="confEditorFilename"
                  placeholder="config.json"
                  aria-required="true"
                  type="text"
                  autocomplete="off"
                  formControlName="editorFilename"
                />
              </c8y-form-group>
              <c8y-form-group class="col-sm-3">
                <label
                  for="confEditorLanguage"
                  translate
                >
                  Language
                </label>
                <c8y-select
                  aria-label="{{ 'Editor language' | translate }}"
                  id="confEditorLanguage"
                  [items]="editorLanguages"
                  formControlName="editorLanguage"
                ></c8y-select>
              </c8y-form-group>
            </div>
            <c8y-form-group class="d-col flex-grow min-height-0 m-b-0">
              <label
                for="confEditorContent"
                translate
              >
                Content
              </label>
              <c8y-editor
                class="flex-grow"
                style="min-height: 95px"
                id="confEditorContent"
                formControlName="editorContent"
                monacoEditorMarkerValidator
                [editorOptions]="{ language: editorLanguage() }"
              ></c8y-editor>
              <c8y-messages></c8y-messages>
            </c8y-form-group>
          </ng-container>
        </c8y-file-picker>
      }
    </fieldset>
  </div>

  <div class="card-footer j-c-between separator flex-no-shrink p-24">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
      [disabled]="saving()"
    >
      <span translate>Cancel</span>
    </button>
    <button
      class="btn btn-primary"
      [class.btn-pending]="saving()"
      [title]="submitButtonTitle() | translate"
      type="submit"
      [disabled]="isSaveDisabled"
    >
      {{ submitButtonTitle() | translate }}
    </button>
  </div>
</form>