@if (!isLoading) {
  <c8y-title>
    {{ formGroup.value | datapointLabel }}
    @if (formGroup.value?.fragment && formGroup.value?.series) {
      <small> {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }} </small>
    }
  </c8y-title>

  <c8y-breadcrumb>
    <c8y-breadcrumb-item
      [icon]="'c8y-tools'"
      [label]="'Configuration' | translate"
    ></c8y-breadcrumb-item>
    <c8y-breadcrumb-item
      [icon]="'c8y-data-points'"
      [label]="'Data point library' | translate"
      [path]="path"
    ></c8y-breadcrumb-item>
    <c8y-breadcrumb-item
      [icon]="'c8y-data-points'"
      [label]="formGroup.value | datapointLabel"
    ></c8y-breadcrumb-item>
  </c8y-breadcrumb>
}

<form
  class="card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto"
  (ngSubmit)="formGroup.valid && save(formGroup.value)"
  (change)="formChange()"
  [formGroup]="formGroup"
  novalidate
>
  <div class="card-header large-padding separator grid__col--fullspan">
    <div class="card-title">
      {{ formGroup.value | datapointLabel }}
    </div>
  </div>
  @if (!isLoading) {
    <div class="d-contents">
      <div class="inner-scroll bg-level-0 flex-grow">
        <div class="card-block large-padding">
          <div class="d-flex">
            <c8y-form-group>
              <label translate>Color</label>
              <div class="data-point-color form-control">
                <div class="c8y-colorpicker">
                  <input
                    [attr.aria-label]="'Color picker' | translate"
                    name="color"
                    type="color"
                    formControlName="color"
                  />
                  <span [style.background-color]="formGroup.value?.color"></span>
                </div>
              </div>
            </c8y-form-group>
            <c8y-form-group class="flex-grow p-l-8">
              <label translate>Label</label>
              <input
                class="form-control"
                name="label"
                type="text"
                formControlName="label"
                [placeholder]="'e.g. Temperature' | translate"
              />
              <c8y-messages
                [show]="formGroup.controls?.label?.touched && formGroup.controls?.label?.errors"
              ></c8y-messages>
            </c8y-form-group>
          </div>
          <c8y-form-group>
            <label translate>Description</label>
            <textarea
              class="form-control"
              name="description"
              rows="3"
              formControlName="description"
              [placeholder]="'e.g. Ambient Temperature in Celsius' | translate"
            ></textarea>
          </c8y-form-group>
          <div class="d-flex a-i-center gap-8">
            <c8y-form-group class="flex-grow">
              <label translate>Fragment</label>
              <input
                class="form-control"
                name="fragment"
                type="text"
                formControlName="fragment"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }"
              />
              <c8y-messages
                [show]="
                  formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors
                "
              ></c8y-messages>
            </c8y-form-group>
            <c8y-form-group class="flex-grow">
              <label translate>Series</label>
              <input
                class="form-control"
                name="series"
                type="text"
                formControlName="series"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'T' }"
              />
              <c8y-messages
                [show]="formGroup.controls?.series?.touched && formGroup.controls?.series?.errors"
              ></c8y-messages>
            </c8y-form-group>
            <div class="flex-no-grow">
              <button
                class="btn btn-default p-l-8 p-r-8"
                [attr.aria-label]="
                  'Load fragment and series from an existing data point' | translate
                "
                [tooltip]="'Load fragment and series from an existing data point' | translate"
                type="button"
                (click)="pickDatapoint()"
                [delay]="500"
              >
                <i c8yIcon="eyedropper"></i>
              </button>
            </div>
          </div>
          @if (config?.showCheckboxForGlobalFragment) {
            <div class="row">
              <div class="col-sm-6">
                <c8y-form-group>
                  <label class="c8y-checkbox">
                    <input
                      name="c8y_Global"
                      type="checkbox"
                      formControlName="c8y_Global"
                    />
                    <span></span>
                    <span translate>Globally available</span>
                    <button
                      class="btn-help"
                      [attr.aria-label]="'Help' | translate"
                      [popover]="
                        'Will make this entry available to all users on the tenant if checked.'
                          | translate
                      "
                      placement="right"
                      triggers="focus"
                      container="body"
                      type="button"
                    ></button>
                  </label>
                </c8y-form-group>
              </div>
            </div>
          }
        </div>
      </div>
      <div class="inner-scroll bg-level-1">
        <div class="card-block large-padding">
          <fieldset class="c8y-fieldset">
            <legend translate>Preview</legend>
            <c8y-range-display
              class="m-b-16 d-block"
              [config]="rangeConfig"
            ></c8y-range-display>
          </fieldset>
          <fieldset class="c8y-fieldset">
            <legend translate>Range</legend>
            <div
              class="row"
              formGroupName="range"
            >
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{ 'has-error': range?.touched && range?.controls?.min?.errors }"
                >
                  <label translate>Min</label>
                  <input
                    class="form-control"
                    name="min"
                    type="number"
                    formControlName="min"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 0 }"
                  />
                  <c8y-messages
                    [show]="range?.touched && range.controls?.min?.errors"
                  ></c8y-messages>
                </c8y-form-group>
              </div>
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{ 'has-error': range?.touched && range?.controls?.max?.errors }"
                >
                  <label translate>Max</label>
                  <input
                    class="form-control"
                    name="max"
                    type="number"
                    formControlName="max"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
                  />
                  <c8y-messages
                    [show]="range?.touched && range.controls?.max?.errors"
                  ></c8y-messages>
                </c8y-form-group>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                <c8y-form-group>
                  <label translate>Unit</label>
                  <input
                    class="form-control"
                    name="unit"
                    formControlName="unit"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 'ºC' }"
                  />
                  <c8y-messages
                    [show]="formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors"
                  ></c8y-messages>
                </c8y-form-group>
              </div>
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{
                    'has-error':
                      (range?.touched || formGroup.controls?.target?.touched) &&
                      formGroup.controls?.target?.errors
                  }"
                >
                  <label translate>Target</label>
                  <input
                    class="form-control"
                    name="target"
                    type="number"
                    formControlName="target"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 25 }"
                  />
                  <c8y-messages
                    [show]="
                      (range?.touched || formGroup.controls?.target?.touched) &&
                      formGroup.controls?.target?.errors
                    "
                  ></c8y-messages>
                </c8y-form-group>
              </div>
            </div>
          </fieldset>
          <fieldset
            class="c8y-fieldset"
            formGroupName="yellowRange"
          >
            <legend translate>Yellow range</legend>
            <div class="row">
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{
                    'has-error':
                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors
                  }"
                >
                  <label translate>Min</label>
                  <input
                    class="form-control"
                    name="min"
                    type="number"
                    formControlName="min"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 50 }"
                  />
                  <c8y-messages
                    [show]="
                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors
                    "
                  ></c8y-messages>
                </c8y-form-group>
              </div>
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{
                    'has-error':
                      (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors
                  }"
                >
                  <label translate>Max</label>
                  <input
                    class="form-control"
                    name="max"
                    type="number"
                    formControlName="max"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
                  />
                  <c8y-messages
                    [show]="
                      (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors
                    "
                  ></c8y-messages>
                </c8y-form-group>
              </div>
            </div>
          </fieldset>
          <fieldset
            class="c8y-fieldset"
            formGroupName="redRange"
          >
            <legend translate>Red range</legend>
            <div class="row">
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{
                    'has-error':
                      (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors
                  }"
                >
                  <label translate>Min</label>
                  <input
                    class="form-control"
                    name="min"
                    type="number"
                    formControlName="min"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
                  />
                  <c8y-messages
                    [show]="(range?.touched || redRange?.touched) && redRange.controls?.min?.errors"
                  ></c8y-messages>
                </c8y-form-group>
              </div>
              <div class="col-md-6">
                <c8y-form-group
                  [ngClass]="{
                    'has-error':
                      (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors
                  }"
                >
                  <label translate>Max</label>
                  <input
                    class="form-control"
                    name="max"
                    type="number"
                    formControlName="max"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
                  />
                  <c8y-messages
                    [show]="(range?.touched || redRange?.touched) && redRange.controls?.max?.errors"
                  ></c8y-messages>
                </c8y-form-group>
              </div>
            </div>
          </fieldset>
        </div>
      </div>
    </div>
  }
  <div class="card-footer separator grid__col--fullspan">
    <button
      class="btn btn-default"
      [title]="'Cancel' | translate"
      type="button"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary btn-form"
      [title]="'Save' | translate"
      type="submit"
      *c8yIfAllowed="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true"
      [disabled]="formGroup.invalid || formGroup.pristine"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>