<c8y-title *ngIf="!isLoading">
  {{ formGroup.value?.label }}
  <small *ngIf="formGroup.value?.fragment && formGroup.value?.series">
    {{ 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?.label"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<form
  (ngSubmit)="formGroup.valid && save(formGroup.value)"
  (change)="formChange()"
  [formGroup]="formGroup"
  class="card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto"
  novalidate
>
  <div class="card-header large-padding separator grid__col--fullspan">
    <div class="card-title">
      {{ formGroup.value?.label }}
    </div>
  </div>
  <div *ngIf="!isLoading" 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"
                  type="color"
                  name="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"
              formControlName="label"
              name="label"
              [placeholder]="'e.g. Temperature' | translate"
              type="text"
            />
            <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"
            formControlName="description"
            name="description"
            [placeholder]="'e.g. Ambient Temperature in Celsius' | translate"
            rows="3"
          ></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"
              formControlName="fragment"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }"
              type="text"
            />
            <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"
              formControlName="series"
              name="series"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'T' }"
              type="text"
            />
            <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"
              (click)="pickDatapoint()"
              type="button"
              [tooltip]="'Load fragment and series from an existing data point' | translate"
              [delay]="500"
              [attr.aria-label]="'Load fragment and series from an existing data point' | translate"
            >
              <i c8yIcon="eyedropper"></i>
            </button>
          </div>
        </div>

        <div class="row" *ngIf="config?.showCheckboxForGlobalFragment">
          <div class="col-sm-6">
            <c8y-form-group>
              <label class="c8y-checkbox">
                <input name="c8y_Global" formControlName="c8y_Global" type="checkbox" />
                <span></span>
                <span translate>Globally available</span>
                <button
                  class="btn-help"
                  type="button"
                  [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"
                ></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 [config]="rangeConfig" class="m-b-16 d-block"></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
                  type="number"
                  class="form-control"
                  name="min"
                  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
                  type="number"
                  class="form-control"
                  name="max"
                  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
                  type="number"
                  class="form-control"
                  name="target"
                  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
                  type="number"
                  class="form-control"
                  name="min"
                  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
                  type="number"
                  class="form-control"
                  name="max"
                  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
                  type="number"
                  class="form-control"
                  name="min"
                  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
                  type="number"
                  class="form-control"
                  name="max"
                  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" type="button" [title]="'Cancel' | translate" (click)="cancel()">
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary btn-form"
      type="submit"
      [title]="'Save' | translate"
      *c8yIfAllowed="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true"
      [disabled]="formGroup.invalid || formGroup.pristine"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>